【CSS】疑似クラス「-child」と「-of-type」の違いを知ろう

CSSには、要素の順番を指定する疑似クラスがあります。
疑似クラス自体が分からない人は、先に「疑似クラスについて知ろう」の記事を読んでみてください。

「疑似クラスについて知ろう」では、要素の順番を指定する疑似クラスを紹介したのですが、その中で以下の記述に注目してください。

:first-child …要素内の最初の子要素
:first-of-type …要素内の最初の子要素

疑似クラスの意味は同じなのに、書き方は「-child」と「-of-type」の2種類がありますよね。
今回はこの「-child」と「-of-type」の違いについて説明します。

「-child」を使用した場合

この記述を、:first-childを使って最初のpタグ（この場合はリンゴ）の文字を赤色にしようとすると、CSSは以下のようになりますよね。

結果は以下のようになります。予想した通り、リンゴが赤色になっています。

ところが、以下のHTMLで同じCSSを適用してみてください。

最初のpタグなので、キャベツが赤色になる…と思うかもしれませんが、実はスタイルは適用されません。
理由は、「要素内の最初の子要素」が「aタグ」だからです。

:first-childをはじめとした「-child」要素は、（aタグであれpタグであれ）まず全ての子要素を参照して、子要素の数を確認します。
そして、該当する子要素が、条件に対して正しいかどうかを確認します。
今回は「親要素(.food)内の最初の子要素」が「pタグ」かどうかですね。
正しかった場合はスタイルが適用され、正しくなかった場合はスタイルが適用されません。
例では「親要素(.food)内の最初の子要素」が「aタグ」だったため、スタイルは適用されませんでした。

この理屈を踏まえると、以下のような場合は「要素内の最初の子要素」が「pタグ」なので、スタイルは適用されます。

「-of-type」を使用した場合

同じ例を使って、今度は:first-of-typeを指定した場合の挙動を見てみましょう。
子要素が全てpタグだと、:first-child同様リンゴが赤色になりますね。

では、以下のHTMLではどうなるでしょうか。

:first-childの時は最初の子要素がaタグのため条件に一致せず、スタイル自体が適用されませんでした。
ですが、:first-of-typeだとキャベツが赤色になります。これが「-child」と「-of-type」の違いです。

「-child」では、まず全ての子要素を参照して数を確認し、その後条件に合っているかどうかを確認していました。
しかし、「-of-type」では先に条件を確認し、その後条件に該当する子要素の数を確認してスタイルを適用します。
つまり今回の場合だと、まず「親要素(.food)内のpタグ」に該当するものを確認し、その中で最初の子要素（キャベツ）にスタイルを適用したということになります。

この理屈を踏まえると、以下のような場合はpタグの中で2番目にあたるお米が赤色になります。

なお、これを:nth-child(2)にした場合は、子要素の2番目がh2なのでスタイルは適用されません。

まとめ

子要素が全て同じセレクタだった場合は「-child」と「-of-type」のどちらを使用しても良いと思います。
ただし、違うセレクタが混ざっていた場合に「-child」を使用すると、スタイル自体が反映されない可能性があるため、「-of-type」を使用したほうがミスに気が付きやすいかと思います。
それぞれ正しく理解して使用するようにしましょう。