【CSS擬似クラス】:nth-child() と :nth-of-type() のちがい

n番目の要素を選ぶ :nth-childと:nth-of-type、
似ていますがちがいはどこにあるのでしょうか？

今回はCSSの2つの擬似クラス
:nth-childと:nth-of-typeのちがいをまとめてみたいと思います。

nth-childとnth-of-typeのちがい

MDNでの定義

まずMDN web docsに掲載されている、それぞれの説明を比較してみたいと思います。

CSS の :nth-child() 擬似クラスは、兄弟要素のグループの中での位置に基づいて選択します。

出典：MDN web docs :nth-child()

CSS の :nth-of-type() 疑似クラスは、兄弟要素のグループの中で指定された型の要素を、位置に基づいて選択します。

出典：MDN web docs :nth-of-type()

内容は似ていますが、
定義が異なる「指定された型の要素を」というところがポイントになりそうですね。

それぞれの特徴

上記を踏まえて、このようにまとめられるのではないかと思います。

では具体例を用いて比較してみましょう。

具体例で比較してみよう

下記のデモを作ってみました。

h2タグで「nth-childとnth-of-typeのちがい」
続いてpタグで「○つめのパラグラフ」と5回続いています。

h2タグとpタグは兄弟要素で、またdivタグの子要素となっています。

この状態で、p:nth-child(2)とp:nth-of-type(2)とどちらも2番目を指定した場合、
どの要素が当てはまるのでしょうか。

See the Pen
eYpoKRr by notebook (@orange-notebook)
on CodePen.

答えは、p:nth-child(2)→黄色いハイライトの「1つめのパラグラフ」、
p:nth-of-type(2)→オレンジのハイライトの「2つめのパラグラフ」となりました。

どうしてでしょうか？

まずp:nth-child(2)ですが、nth-childはpと指定した要素と異なる要素でもカウントの対象になるので、h2からカウントが始まります。

そのため、h2がnth-childの1番目、次の1つ目のpタグ「1つめのパラグラフ」が2番目となります。

一方p:nth-of-typeは、指定しているpタグの順番でカウントするので、
h2タグが兄弟要素の中では1番はじめにあっても飛ばされます。

そのため「1つめのパラグラフ」がnth-of-typeの1番目、「2つめのパラグラフ」が2番目となります。

以上、:nth-childと:nth-of-typeの2つのちがいについてでした。