:first-child クラス
:first-child クラスは、セレクターで指定されたタグエレメントのうち最初のエレメントにスタイルを反映する擬似クラスです。
このクラスは、対象となるエレメントがひとつの場合はそのエレメントが選択されます。
クラス名などによる場合は、そのクラス名をもつ複数の同じタグエレメントから最初のエレメントが選択されます。
上記の例は、<div> 内の最初のエレメントが対象になります。
対になるクラスに:last-childクラスがあります。こちらは最後のエレメントが対象になります。
似た疑似クラスに:first-of-typeクラスがあります。 :first-of-typeクラスは、1つまたは複数の同じタグエレメントのうち最初のエレメントが選択されます
ページ内 Index
:first-child クラスについて
:first-child クラスは親エレメント以下で使用する場合と、セレクターでエレメントを指定する場合でスタイルの反映に違いがあります。
親エレメント以下の場合
以下のように親エレメント以下という指定をした場合は、子エレメントとして最初のエレメントが選択されます。ひとつの場合はそのエレメントが選択されます。
セレクターでエレメントを指定
セレクターでエレメントを指定した場合は、そのエレメントの最初の子にスタイルを反映します。ひとつの場合はそのエレメントが選択されます。
構文(Syntax)
CSS
DOM ( JavaScript )
疑似クラスはDOM ( JavaScript )から操作できません。
スタイルのみの操作は擬似クラスを利用したほうが簡易です。
Example
:first-childの例です。対象となる複数の同じタグエレメントのうち最初のエレメントにスタイルを反映しています。
関連する疑似クラス
1つまたは複数あるエレメントを選択する疑似クラスには以下があります。
- :first-child... 複数あるエレメントの内で最初のエレメント(要素)が対象
- :first-of-type... 1つまたは複数あるエレメントの内で最初のエレメント(要素)が対象
- :last-child... 複数あるエレメントの内で最後のエレメント(要素)が対象
- :last-of-type... 1つまたは複数あるエレメントの内で最後のエレメント(要素)が対象
- :nth-child()... カッコ内の番号、キーワード、式に該当する子エレメントが対象
- :nth-last-child()... 複数あるエレメントのうちで、カッコ内の番号、キーワード、式に後ろから数えて該当するエレメントが対象
- :nth-last-of-type()... カッコ内の番号、キーワード、式に後ろから数えて該当する子エレメントが対象
- :nth-of-type()... 複数あるエレメントのうちで、カッコ内の番号、キーワード、式に該当するエレメントが対象