こんにちは。
最近自室が寒すぎて除湿器から氷が出てきました。

今回はCSS初学者が躓きがちな「nth-child」「nth-of-type」系疑似クラスの使い方について解説したいと思います。

「nth-child」「nth-of-type」とは

○「nth-child」「nth-of-type」はいずれも兄弟要素の「n番目の要素」を指定する疑似クラスです。

○疑似クラスはセレクタに対して特定の状態を指定できるものです。
　「:hover」や「:checked」等も疑似クラスにあたります

疑似クラスを使いこなすことでより柔軟なCSSが書けるようになります。
今回はスポットを当てませんがかなりの種類があるので、気になる方は関連ページのMDNリファレンスを見てみてください。

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

さっそく今回の本題に入ります。

「nth-child」と「nth-of-type」はどちらも兄弟要素の「n番目の要素」を指定する、と前述しましたが、
この2つの間では「n番目に含まれる対象」が異なります。

具体的に見ていきましょう。

nth-childの場合

See the Pen Untitled by Nako (@mr_nako) on CodePen.

「text」クラスが付いたdivタグとpタグを交互に置き、「.text:nth-child(2)」が赤字になるように指定しています。
赤字になったのは「2番目のテキスト」です。
「『text』クラスが付いた2番目の要素」にスタイルが当たっているように見えますが…

See the Pen Untitled by Nako (@mr_nako) on CodePen.

先ほどのHTMLに対し、最初のdivタグのクラスを「title」へ変更しました。
前述の解釈からすると、この場合「『text』クラスが付いた2番目の要素」は「3番目のテキスト」になるわけですが、赤字になっているのは「2番目のテキスト」のままです。

上記からわかるように、「:nth-child」はタグや属性を問わずすべての兄弟要素のn番目を指します。

なので、ここでは「『text』クラスが付いた2番目の要素」ではなく、

・.nth-child_testの2番目の子要素であり
・「text」クラスがついている

要素を指定しているということになります。

nth-of-typeの場合

See the Pen Untitled by Nako (@mr_nako) on CodePen.

nth-childと同様、「text」クラスが付いたdivタグとpタグを交互に置き、「.text:nth-of-type(2)」が赤字になるように指定しています。
赤字になったのは「3番目のテキスト」と「4番目のテキスト」です。早速nth-childと異なる動きをしているのがわかりますね。

「:nth-of-type」では、同じタグをもつn番目の要素を指します。

このため、HTML内で「text」クラスをもつ「2つ目のdiv」と「2つ目のp」にスタイルが当たっている状態となります。

まとめ

・「:nth-child」はすべての兄弟要素のn番目を指す
・「:nth-of-type」は同じタグをもつn番目の要素を指す

状況に応じて使い分けられるようにしていきたいですね。

いかがでしたでしょうか。
個人的に、CSSの感覚を掴むには自分で色々なパターンで実験するのが一番早いなと感じています。

サイト制作でお困りの際はぜひお問い合わせください。

それでは。