私はこれまであまり意識せずに、:nth-childだけを使っていたので、明確な違いについてきちんと理解していませんでした。

改めて、:nth-childと:nth-of-typeの違いについて理解すると、この使い分けは便利ですし、使える場面はたくさんあります。

そこで今回は、擬似クラス「:nth-child」と「:nth-of-type」の違いについてお話ししていきたいと思います。

擬似クラスとは？

擬似クラスとは、簡単に説明すると「指定した要素に特定の状態を付加するもの」です。

詳しくは、こちらの記事にも書いているので、そちらもご覧下さい。

「nth-child」と「nth-of-type」の違いについて

まずは最初に「nth-child」と「nth-of-type」の違いについて解説していきます。

以下にサンプルコードを用意したので、確認してみます。

dl要素を用意して、:nth-child(3)と設定したものと、:nth-of-type(3)と設定したもので比較してみます。

<dl>
	<dt>名称１</dt>
	<dd>説明文１</dd>
	<dt>名称２</dt>
	<dd>説明文２</dd>
	<dt>名称３</dt>
	<dd>説明文３</dd>
	<dt>名称４</dt>
	<dd>説明文４</dd>
	<dt>名称５</dt>
	<dd>説明文５</dd>
</dl>

dl dd:nth-child(3) {
	color: #999;
}
dl dd:nth-of-type(3) {
	color: #f33;
}

名称１

説明文１

名称２

説明文２

名称３

説明文３

名称４

説明文４

名称５

説明文５

上記の例では、「説明文３」の箇所のみ色が変わっていますね。

なぜこのような結果になったのか、解説していきます。

:nth-child について

今回のサンプル例では、dl要素の子要素はdt要素とdd要素が並んでいます。

dd:nth-child(n)では、「n番目の子要素がdd要素だったら適用する」という意味になります。

したがって、今回の例では3番目の子要素がdd要素だった場合に適用する指定ですが、残念ながら3番目の子要素はdt要素になっていたため、スタイルが適用されませんでした。

:nth-of-type について

今度は、dd:nth-of-type(n)とした場合を見ていきます。

この場合は、「dd要素のn番目に適用する」という設定になります。

したがって、dt要素は読み飛ばしてdd要素だけをカウントしてn番目の要素にスタイルが適用されます。

「nth-child」と「nth-of-type」の使い分け

以上のことから、適用される要素に違いが生じる場合があるため、使い分けが必要になってきます。

使い分けする際のポイントは1つだけです。

子要素が単一の場合は、「:nth-child」

子要素に複数の異なる要素が含まれていたら、「:nth-of-type」

を使いましょう！！

まとめ

CSSの勉強を始めたばかりの頃は、意外とこの使い分けが理解できないことがあるかもしれませんが、子要素が単一要素かどうかを判断して使い分けてみて下さい。

子要素が単一の場合は、:nth-child(n)を使うと、n番目の子要素に適用されます。

子要素が異なる複数の要素だった場合、:nth-of-type(n)を使用すると、指定した子要素のn番目に適用されます。

もっと詳しく知りたい方は、こちらにご相談下さい。

お問い合わせはこちら