hajipion.com

UI/UX designer blog & creative portfolio

「nth-child」と「nth-of-type」の違いをわかりやすくまとめてみた

nthサムネイル

「nth-child」と「nth-of-type」の違い

どちらかを使ったことがあるという人は多いでしょう、このふたつ。

「nth-child」「nth-of-type」

ふたつとも「n番目の要素」を指定する擬似クラスです。

たとえば↓こんなコードがあったとしたら、

nth-childとnth-of-type

ブラウザではこう表示されます。

ブラウザの表示

nth-of-typeでも同様。

nth-of-typeにしても同じ
nth-of-typeでも同様

じゃあそのふたつの違いってなんなのか!

今から解明します。

端的に言うと「要素の数え方」

以下のようなソースがあるとします。

nth-childのodd

oddは「奇数」を意味するので、ここでは奇数番目の子となるp要素が赤くなります。

nth-childのodd結果

これをnth-of-typeで書くと……

nth-of-typeのodd
nth-of-typeのodd結果

なんと、キャベツとトマトの代わりにピーマンが赤くなりました!

赤ピーマンです!(よくわからない)

なぜこうなったかというと、nth-of-typeはその名の通り「type」つまり「型」を見ており、順番を数えるときにpタグしか見ない!からなんですね。

たしかに6個あるpタグのうち、1,3,5番目のpタグは赤くなってます。

一方でnth-childは全ての要素を数えるので、この例でいうと「野菜」という見出しも「偶数のもの」として数えられているわけです。

nth-childのodd結果

理解できましたか?

まとめるとこんな感じ。

nthまとめ

確認問題

このソースコードをみて、どの果物が赤くなるのか予想してみてください!

nth-child3

わかるかな…?( ̄▽ ̄)

正解は……みかん!

nth-child3結果

nth-childなので、要素の数えは全体でおこないます。1つ目は「分類」、2つ目は「果物」、そして3番目は「みかん」ですね。

では逆に、nth-of-typeを使うと何が赤くなると思いますか?

nth-of-type3

……楽勝ですね(σ・ω・)σ

正解はいちご!

nth-of-type3結果

nth-of-typeは指定した型でのみ数えるので、pタグで囲われた「みかん」、「りんご」ときて、その次の「いちご」が赤くなるように書かれています。

以上、簡単でしたが「nth-child」「nth-of-type」の違いでした!