CSS 「:first-child」と「:first-of-type」の使い方

first-of-typeの方がよく使います。

:first-childの使い方
例
article :first-child {
    color: red
}
articleタグの一番最初の子要素について、文字を赤色にします
（article直下で一番最初のh1が赤色になります）

:first-of-typeの使い方
例
article p:first-of-type {
    color: red;
}
aricleタグ内のp要素で、一番最初に出てくるものの文字を赤色にします。

なお、上の例で

article p:first-child {
    color: red;

と打っても、色は変わりません。
これは、articleの中の一番最初に出てくる要素（h1）を参照しているが、それはpタグではないため、色が変わらないということです。

参考にしたYouTube