first-childとfirst-of-typeの違い

先頭の要素にだけ色をつけたいとき、first-childを使えばいいと思っていました。
しかし、CSSでfirst-childを指定しても色がつかない…first-of-typeを指定すると色がつきました。
first-childとfirst-of-typeの違いって普段全然意識していなかったので、まとめてみます。

first-childとfirst-of-typeの違い

違いは「要素の中のどこを見ているか」です。

• first-child：親要素の最初の子要素を見ている
• first-of-type：親要素内で特定のタグ名（種類）の最初の要素を見ている

以下は、p:first-childで文字を赤色にしたいのにできなかった例です。

なぜ文字を赤色にできなかったか

理由は、タイトルの文字がh2で作られているためです。
first-childは、親要素（この場合は.container）の一番最初の子要素が<p>タグだった場合にのみ適用されます。pじゃないなら赤色にはできない！と判断され、赤色にできませんでした。

もしfirst-childを使ってタイトルを赤色にしたい場合は、h2をpにして、CSSからfirst-of-typeの記述を削除すれば赤色になります。（CSSは上から順番に読み込まれるので、first-of-typeの記述を残したままだと文字が青くなってしまいます。）

まとめ

SCSSを書くときに擬似クラスがとても便利でよく使うのですが、まだまだ理解が浅かったです。
擬似クラスにはnotなど否定の使い方もあるので、まとめてみます。