「nth-child」と「nth-of-type」の違いをわかりやすくまとめてみたどちらかを使ったことがあるという人は多いでしょう、このふたつ。 「nth-child」と「nth-of-type」。 ふたつとも「n番目の要素」を指定する擬似クラスです。 たとえば↓こんなコードがあったとしたら、 ブラウザではこう表示されます。 nth-of-typeでも同様。 じゃあそのふたつの違いってなんなのか！ 今から解明します。 端的に言うと「要素の数え方」 以下のようなソースがあるとします。 oddは「奇数」を意味するので、ここでは奇数番目の子となるp要素が赤くなります。 これをnth-of-typeで書くと…… なんと、キャベツとトマトの代わりにピーマンが赤くなりました！ 赤ピーマンです！（よくわからない） なぜこうなったかというと、nth-of-typeはその名の通り「type」つまり「型」を見ており、順番を数えるときにpタグしか見ない！からなんですね。 たしかに6個あるpタ
