備忘録的プログラミングリファレンス

:first-child クラス

 :first-child クラスは、セレクターで指定されたタグエレメントのうち最初のエレメントにスタイルを反映する擬似クラスです。

 このクラスは、対象となるエレメントがひとつの場合はそのエレメントが選択されます。

 クラス名などによる場合は、そのクラス名をもつ複数の同じタグエレメントから最初のエレメントが選択されます。

:first-child クラス
div :first-child{
	background-color: yellow;
}

詳しくは Example を参照してください

 上記の例は、<div> 内の最初のエレメントが対象になります。

 対になるクラスに:last-childクラスがあります。こちらは最後のエレメントが対象になります。

 似た疑似クラスに:first-of-typeクラスがあります。 :first-of-typeクラスは、1つまたは複数の同じタグエレメントのうち最初のエレメントが選択されます

:first-child クラスについて

 :first-child クラスは親エレメント以下で使用する場合と、セレクターでエレメントを指定する場合でスタイルの反映に違いがあります。

親エレメント以下の場合

 以下のように親エレメント以下という指定をした場合は、子エレメントとして最初のエレメントが選択されます。ひとつの場合はそのエレメントが選択されます。

:only-child例

セレクターでエレメントを指定

 セレクターでエレメントを指定した場合は、そのエレメントの最初の子にスタイルを反映します。ひとつの場合はそのエレメントが選択されます。

:only-child例

構文(Syntax)

CSS

HTMLElement:first-child {
  style_propaties;
}

DOM ( JavaScript )

 疑似クラスはDOM ( JavaScript )から操作できません。
 スタイルのみの操作は擬似クラスを利用したほうが簡易です。

Example

 :first-childの例です。対象となる複数の同じタグエレメントのうち最初のエレメントにスタイルを反映しています。