Edited at

nth-child と nth-of-type の違いが今までわかっていませんでした。


前提


  • nth-child と nth-of-type をなんとなく使っていた方向け


環境


  • CodePen


TL;DR

端的に言うと、


  • nth-child は、親要素の n 番目にマッチする場合

  • nth-of-type は、 親要素にある指定の要素のうち、 n 番目にマッチする場合

にそれぞれスタイルが当たるようになっています。

See the Pen nth-child vs nth-of-type by FumiyaShibusawa (@smartponzu) on CodePen.


詳細

上記の CodePen をみてみると、div を親要素として、h2、p、p、pという順で子要素が並んでいるのが分かると思います。ここで以下のスタイルを当てます。

#nth-child {

p:nth-child(1) { // これは当たりません。
color: red;
}
p:nth-child(2) {
color: red;
}
}

#nth-of-type {
p:nth-of-type(1) {
color: red;
}
p:nth-of-type(2) {
color: blue;
}
}


nth-child の場合

親要素が持っている子要素のうち、 n 番目に対象の要素があった場合にのみスタイルが当たります。

CodePen の例でいうと、1番目の子要素に p タグはないので、 p:nth-child(1) にはスタイルが当たりません。 p タグが出てくるのは2番目からなので、 p:nth-child(2) であればスタイルは当たります。


nth-of-type の場合

親要素が持っている子要素の 指定するセレクター のうち、 n 番目に対象の要素があった場合にのみスタイルが当たります。この場合は、予め擬似クラスをあてるセレクター( p タグ)に限定してくれます。 p:nth-of-type(1) であれば、親要素の中の p タグのうち、1番目のものにスタイルが当たります。


参考文献

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type