CSSのnth-child(n)とnth-of-type(n)の違いと使い方

CSSで使うnth-child(n)とnth-of-type(n)は共に「n番目の要素」を指定する、という「使い方」については同じですが、n番目の要素を取得する際の「要素の数え方」においては明確な違いがあります。

ちなみに（n）のnは正の整数（Naturarl Number）のnです。整数は「小数でも分数でもない数（要するに0, 1, 2…）」のこと。

それぞれの違い

以下に例を示します。

<div class="meat">
  <h1>肉の種類</h1>
  <p>牛</p>
  <p>豚</p>
  <p>鳥</p>
</div>

というHTMLがあり、２番目のタグの文字（ここでは豚）の色を変えたい場合

.meat {
   p:nth-of-type(2) {
   color : red ;
   }
}

// SCSS表記 //

.meat {
   p:nth-child(3) {
   color : red ;
   }
}

// SCSS表記 //

とそれぞれ記載した時

意図した要素の色を変えることができます。

nth-of-typeは同種類のp要素の中から2番目を指定する一方で、nth-childは全ての子要素の中から3番目の要素を指定していることが分かります。

nth-of-type(n)の方が意図した要素を取得するために必要な条件の数が少ないので使いやすい場面が多いと思います。今回の場合p:nth-of-type(2)であれば

という条件さえ満たせば成立するのに対し、p:nth-child(3)は

という二つの条件を満たす必要があります。

今回はどちらも条件は成立してますが、仮に<h1>の下に<img>と が追加された場合

<div>
  <h1>肉の種類</h1>
  <img>
  <br>
  <p>牛</p>
  <p>豚</p>
  <p>鳥</p>
</div>

p:nth-child (3)は「3番目の要素が要素である」という条件を満たさず不成立となり、もはやどの要素の色も変えることができません。

一方でp:nth-of-type (2)は引き続き条件に当てはまります。

このように何かしらの変化があった時にとある物事が成立するための条件数が少ないと影響を受けづらくその条件が破綻する可能性が低いので、後々のことを考えてもnth-of-type(n)の方が使い勝手、保守性という面からもより良い選択なのではないかと思います。