WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

first-childやlast-childを使用している方はご存じかもしれませんが、今回は「:nth-child()」と「:nth-of-type()」についてです。

この2つの疑似クラスは「何（n）番目を指定する」といった使い方をするので、機能としては非常に似ていますが、基本的に異なる方法で機能します。その仕組みを確認していきましょう。

:nth-child()はどんな機能？

nth-child()は、ある要素の隣接している子要素を最初から数えて、n番目にあたる要素にスタイルを適用します。
その為、間に別の要素が有るとその要素もカウントしてn番目にスタイルが適用されます。

See the Pen nth-child by saki kurita (@saki_0415) on CodePen.

2n番目（2番目、4番目、6番目）のliの要素に背景色があたります。
また「odd」「even」のようにキーワードを使用することも可能です。

See the Pen nth-child(odd) by saki kurita (@saki_0415) on CodePen.

特定の要素にだけスタイルをあてることも可能です。

See the Pen nth-child(n) by saki kurita (@saki_0415) on CodePen.

クラス名exampleの５番目の要素に背景色がつくようになります。

nth-of-type()はどんな機能？

「:nth-of-type()」は「:nth-child()」のように、数に基づいて要素を一致させるために使用されます。
ですが、その数はタイプが同じ要素である親子の中だけから要素のポジションを表します。
以下で違いを見てみましょう。

See the Pen nth-of-type() by saki kurita (@saki_0415) on CodePen.

p:nth-child(2)は指定されたpタグかつ、その親要素section内の2番目の子要素の2つの条件を満たす【親要素の2番目の子供かつ1番目のpタグ】を選びます。

しかし、p:nth-of-type(2)は指定されたpタグの親要素section内のpタグ内で2番目の要素である 【親要素の3番目の子供かつ2番目のpタグ】を選びます。
一見同じようなCSSの記述に見えますが、一致条件が異なる為指定されるタグが変わってきます。
ここの使い分けを理解しておくと、条件によって記述するCSSを変えてコーディングしていく事ができます。

他にもある「nth」疑似クラス

「:nth-child()」と「:nth-of-type()」の他にも親子内での位置に基づいて要素を選択するために使用できる構造的擬似クラスがあります。
2つのグループに分類され、1つは「:nth-child()」のようにタイプに依存しないもの、もう1つは「:nth-of-type()」のようにタイプに依存するものです。

依存しないもの	依存するもの
nth-child()	nth-of-type()
nth-last-child()	nth-last-of-type()
first-child()	first-of-type()
last-child()	last-of-type()
only-child()	only-of-type()

まとめ

似ているようで実は使いどころが異なる擬似クラスですが、使い方をマスターするとコーディングが効率的になること間違いなしです。
是非、試してみてくださいね。