似て非なる疑似クラス！:nth-child(n)と:nth-of-type(n)の違い

こんにちは、初めまして。らび太と申します。
初めての投稿です。これからよろしくお願いします。

（こうやって書くと90年代のWeb掲示板みたいですね。。）

さて今日は、疑似クラス「:nth-child(n)」と「:nth-of-type(n)」について書いていこうかと思います。
どちらも「上からn番目の要素」を選択するのですが、childとtypeで選択する基準が異なります。

それではまず:nth-child(n)からー。
以下のhtmlをもとに話を進めていきます。

:nth-child(n)は、親要素から数えてｎ番目の子要素を選択することになります。
記述はこのような感じです。

親要素（ここではsection要素）には、divとp合わせて6つの子要素があり、p要素は2，3，5，6番目にあります。
上記cssは「親要素内にある子要素で、3番目と4番目がp要素だったらそいつの背景色を変えてね」という意味です。
しかし、4番目にはdiv要素があるため、実際に適用されるのは親要素から数えて3番目の子要素（p要素）のみとなるのです。

結果は以下のような感じです

対して:nth-of-type(n)はというと

:nth-of-type(n)は、親要素内にある同一の子要素のｎ番目を選択することになります。
先述のchildだと親要素内のすべての子要素が対象だったのに対し、
of-typeの場合だと「親要素内にあるp要素から3番目と4番目の背景色を変えてね」という意味の記述になるのです。
上記のhtmlではp要素が4つあるので、その中から3番目と4番目の背景色が変わります。

結果は以下のような感じです

まとめると、

• 「指定した要素が親要素からｎ番目にあればスタイルを適用」するのが:nth-child(n)
• 「指定した同一の要素が親要素からｎ番目にあればスタイルを適用」するのが:nth-of-type(n)

ということになるわけです。

この違いがややこしい、というか、初めてhtml/cssを勉強する人にとってはなかなか理解しにくいものがあるのではないでしょうか。
まさに自分がそうでした。。笑
なので、自分自身の復習もかねてこれを記事にしようと思いました。

ちなみにこの2つの疑似クラス、(n)の部分は数値のほかにも
even　=　偶数番目の子要素
odd　=　奇数番目の子要素
3n　=　3の倍数の子要素
などといったキーワードや数値を入力することもできます。

1段ごとの写真配置を左右交互にレイアウトしたい時などに非常に有用です！
クラスやidを使わずにスタイルの使い分けができるこの疑似クラスたち、うまく使いこなせれば様々なレイアウトに応用ができると思うので試してみてくださいねー。

それではまた！