どちらかを使ったことがあるという人は多いでしょう、このふたつ。 「nth-child」と「nth-of-type」。 ふたつとも「n番目の要素」を指定する擬似クラスです。 たとえば↓こんなコードがあったとしたら、 ブラウザではこう表示されます。 nth-of-typeでも同様。 じゃあそのふたつの違いってなんなのか! 今から解明します。 端的に言うと「要素の数え方」 以下のようなソースがあるとします。 oddは「奇数」を意味するので、ここでは奇数番目の子となるp要素が赤くなります。 これをnth-of-typeで書くと…… なんと、キャベツとトマトの代わりにピーマンが赤くなりました! 赤ピーマンです!(よくわからない) なぜこうなったかというと、nth-of-typeはその名の通り「type」つまり「型」を見ており、順番を数えるときにpタグしか見ない!からなんですね。 たしかに6個あるpタ
![「nth-child」と「nth-of-type」の違いをわかりやすくまとめてみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/e3c3dbb87330b231aca21a1e5944254f0be3b17d/height=288;version=1;width=512/https%3A%2F%2Fhajipion.com%2Fwp-content%2Fuploads%2F2014%2F05%2F5380571c0cb7b688273546de568400e3.png)