【コーディング備忘録】○番目の要素を指定する際の「nth-child」と「nth-of-type」について学ぶ

「○番目」や「奇数・偶数」などの特定の要素にだけ変化をつけたい、そんな時に便利な疑似クラス「nth-child」と「nth-of-type」について学んでみましょう。使う機会は多いものの、忘れたりごっちゃになったり、なかなか定着しないので簡単にまとめてみました。

○番目の特定の要素を指定したい場合

以下のようなサンプルを用意してみました。

今回は、pタグの３番目である「３番目」というテキストを赤くしてみます。

このようにpタグに対しnth-child(3)を指定してみると、「２番目」というテキストが赤くなってしまいました。

これは親要素内にある全ての要素がカウント対象になってしまうため、h1から数えて３番目の子要素である「２番目」が該当してしまったため。

「pタグに限定したい！」そんな場合は、pタグに対しnth-of-type(3)を指定してあげましょう。

このように、親要素内の「pタグ」のみカウントしてくれます。

まとめ

1. nth-child(n)は、親要素内のｎ番目（全ての要素をカウントする）
2. nth-of-type(n)は、親要素内の指定した要素の中のｎ番目（指定した要素の中でカウントする）