特定の親要素の子要素を選択

CSSにおいて、:nth-child() は特定の親要素の子要素を選択するのに非常に便利な擬似クラスです。
これは、奇数や偶数、特定の位置にある要素を選択するのに使われます。
以下では、:nth-child() の基本的な使い方と、いくつかの実用的な例について紹介します。

基本の構文

n番目の要素の選択

nth-child(n)

これは、親要素の子要素のうち、n番目にある要素を選択します。
ここで n は数値、キーワード（even または odd）、または式（2n、3n+1など）のいずれかです。

nth-child()の使用例

奇数番目の要素をスタイルする

li:nth-child(odd) {
  background-color: #f0f0f0;
}

この例では、リスト内の奇数番目の li 要素の背景色を灰色に設定しています。

偶数番目の要素をスタイルする

li:nth-child(even) {
  background-color: #f0f0f0;
}

3の倍数番目の要素を選択する

div:nth-child(3n) {
  color: red;
}

この例では、div 要素の中で3の倍数番目にある要素のテキスト色を赤に設定しています。

特定の範囲の要素を選択する

p:nth-child(n+2):nth-child(-n+5) {
  font-weight: bold;
}

この例では、2番目から5番目までの p 要素に太字のスタイルを適用しています。

注意事項

1. :nth-child() は1から数え始めます。
   すなわち、:nth-child(1) は最初の子要素を選択します。
2. 複雑な式も使用できます。
   例えば、:nth-child(2n+1) は奇数番目の要素を選択します。

まとめ

:nth-child() は、柔軟で強力なセレクタであり、要素の特定のパターンを選択してスタイルを適用するのに役立ちます。
これを活用することで、デザインの柔軟性が向上し、より効率的にスタイルを適用することができます。