CSSの:first-childは兄弟要素の中のグループの中の最初の要素を表す擬似クラスです。
よく:first-of-typeと混同されますので、まず:first-childと:first-of-typeの違いを見ていきましょう。
:first-of-typeは兄弟要素の中で「その要素」の最初の要素を表します。一方で:first-childは兄弟要素の中の最初の要素を表します。
言葉だとわかりにくいため、下記のサンプルコードを見てみましょう。
上記のサンプルコードではp:first-of-typeの擬似クラスの指定では色が青くなります。div要素が2つあり、その中にp要素が並んでいますが、2つのdiv要素の中のp要素のグループの中で最初のp要素の色が青くなっています。
一方でp:first-childでは2つのdiv要素の中でそれぞれ先頭の要素でp要素のものが、背景色を緑となります。（前者のdiv要素は最初がh1要素のため、スタイルは効かない）
このように:first-childと:first-of-typeは似ているようですが、意味合いが異なるため注意しましょう。
/* 構文 */
:first-child
/* 設定例 */
p:first-child {
color: blue;
}
.sample p:first-child {
color: blue;
}上記のサンプルコードではp:first-childの疑似クラスを指定によって、その兄弟要素の中の最初のp要素の色が青になります。
つまり.sample-1と.sample-2のクラスセレクタのdiv要素の内部にある、p要素でそれぞれ最初のp要素の色が青になります。
上記のサンプルコードでは.sample-1のクラスセレクタのdiv要素の内部にh1要素を先頭に追加しました。
このh1要素の追加により、div要素の兄弟要素の中で最初の要素はh1要素となり、p:first-childの指定からは外れる事になります。
また、もしも各div要素の中の最初のp要素の文字を青くしたい場合は下記のようにしましょう。
CSSの:first-childはモダンなブラウザのほぼ全てで対応しています。:first-childの各ブラウザ毎の対応状況を確認したい方は下記よりご確認頂けます。
:first-childの擬似クラスでCSSを組んでいる時に、:first-childが思うように効かないという場合があります。その場合の対処法について下記で解説していますのでぜひ参考にしてみて下さい。
