CSS:【nth-child(n)】系の使い方。子要素の選択を利用してスタイルを効率的に当てよう！

　スタイルシートを書いていると、様々な場面で個別にスタイルを当てたいときがあります。でも、その都度個別にクラスを付ければいいときと、もう少し効率よく処理したい時があります。そのようなときに役立つのが、この【nth-child(n)】系の疑似クラスセレクタです。特定の順番を指定してスタイルを適用することができるので、何かと便利に使うことができます。

nth-childセレクタの基本

nth-childセレクタは、特定の要素の子要素の中から、指定した順番にある要素を選択するためのセレクタです。基本的な構文は element:nth-child(n) です。ここで、elementは選択したい要素の種類、nは選択したい子要素の順番を表します。例えば、p:nth-child(2)は、ある要素の2番目の

要素を選択します。

上記のCSSは、各要素の2番目の

要素のテキスト色を赤に設定します。

nth-childセレクタの詳細

　nth-childセレクタは、さまざまな方法で使用できます。nの部分には、具体的な数値を入れることもできますし、oddやevenといったキーワードを入れて奇数や偶数の要素を選択することもできます。

上記のCSSは、リストの奇数番目の項目の背景色を灰色に設定します。

また、nの部分には数式を入れることも可能で、これにより特定のパターンに従った要素を選択することができます。例えば、li:nth-child(3n+1)は、リストの要素の中で、3の倍数+1（つまり、1番目、4番目、7番目…）の要素を選択します。

上記のCSSは、リストの1番目、4番目、7番目…の項目のテキスト色を青に設定します。

nth-childセレクタ・リファレンス

　以下にnth-childの使用方法のリファレンスを表示します。

• li:nth-child(n) – n番目の項目に適用
  ○○●○○○○○ (n=3の場合)
• li:nth-child(odd) – 奇数番目の項目に適用
  ●○●○●○●○
• li:nth-child(even) – 偶数番目の項目に適用
  ○●○●○●○●
• li:nth-child(3n) – 3の倍数番目の項目に適用
  ○○●○○●○○●
• li:nth-child(3n+1) – 3の倍数+1番目の項目に適用
  ●○○●○○●○○
• li:nth-child(3n-1) – 3の倍数-1番目の項目に適用
  ○●○○●○○●○ (nが正の場合)
• li:nth-child(-n+3) – 上から3番目までの項目に適用
  ●●●○○○○○
• li:nth-last-child(n) – 下からn番目の項目に適用
  ○○○○○○●○ (n=2の場合)
• li:nth-last-child(odd) – 下から数えて奇数番目の項目に適用
  ○●○●○●○●
• li:nth-last-child(even) – 下から数えて偶数番目の項目に適用
  ●○●○●○●○
• li:first-child – 最初の項目に適用
  ●○○○○○○○
• li:last-child – 最後の項目に適用
  ○○○○○○○●
• li:nth-last-child(3) – 下から3番目の項目に適用
  ○○○○●○○○
• li:nth-last-child(3n) – 下から3の倍数番目の項目に適用
  ○○●○○●○○●
• li:nth-last-child(-n+3) – 下から3番目までの項目に適用
  ○○○○○●●●
• li:not(:nth-child(-n+2)):not(:nth-child(n+6)) – 3番目から5番目までの項目に適用
  ○○●●●○○○
• li:nth-child(4), li:nth-child(7) – 4番目と7番目の項目に適用
  ○○○●○○●○

nth-child(n)とnth-of-type(n)の違い

　nth-child(n)には似たようなセレクタでnth-of-type(n)というものがあります。
　基本的に使い方は同じですが、要素に対する効き方が違います。
　nth-childは親要素の全ての子要素をカウントし、その中から指定されたタグが指定された順番に存在する場合に選択します。一方、nth-of-typeは親要素の子要素の中から指定されたタグのみをカウントし、その中で指定された順番の要素を選択します。したがって、nth-of-typeは他のタグの存在を無視して、指定されたタグのみに焦点を当てます。
つまり、

とタグが並んでいた場合、
div:nth-child(3) { color:red} は、どの色も変わりませんが、
div:nth-of-type(3) { color:red} は、最後の丸が赤に変わります。
これは、前者は子要素の全てをカウントするので、3番目が<p>ですから,そこには適用されません。しかし後者は、そこを飛ばしてカウントしますので、3番目の<div>タグである、4番目のタグの色を変えるということです。時に応じて使いやすい方を使うといいと思います。

参考リンク

mdn web docs -:nth-child()
W3C Selectors Level 3: :nth-child() W3Cの公式ドキュメンツ