【CSS】nth-childの使い方と具体例（SCSSの記述も紹介）

CSSのnth-child擬似クラスは、親要素内の特定の子要素にスタイルを適用するための非常に便利なツールです。

これを使うことで、リストアイテムやテーブル行、その他のHTML要素に対して、順番に基づいてスタイルを設定することができます。

本記事では、nth-childの基本的な使い方と、実際のコード例を交えて説明します。

さらに、SCSS（Sass）を使った記述方法も合わせて紹介します。

nth-childの基本構文。

まずは、nth-childの基本的な使い方を見ていきましょう。

selector:nth-child(pattern) {
  /* スタイル */
}

• selector: 対象となる親要素（例えば、ul, ol, divなど）。
• nth-child(pattern): 子要素の位置に基づいてスタイルを適用するための部分です。

nth-childのパターン。

nth-childのpattern部分には、以下のようなパターンを使うことができます。

特定の順番の子要素を選択。

li:nth-child(2) {
 color: red; /* 2番目のリストアイテムを赤く */
}

このコードでは、2番目の<li>要素に赤色を適用しています。

もちろん、色以外のスタイルを適用させることができます！

奇数番目、偶数番目の子要素を選択。

nth-childでは、奇数番目（odd）や偶数番目（even）の要素にもスタイルを適用できます。

li:nth-child(odd) {
  background-color: lightgray; /* 奇数番目のリストアイテムに背景色 */
}

li:nth-child(even) {
  background-color: lightblue; /* 偶数番目のリストアイテムに背景色 */
}

この場合、奇数番目のアイテムにはライトグレーの背景色、偶数番目のアイテムにはライトブルーの背景色が適用されます。

実務を１年間こなしてきた感触ですが、あまり登場の機会はありません・・・（笑）

テーブルなどで奇数行（列）だけ色を変えてみやすくしたいとか、そんな感じで使った記憶があります。

私のブログのテーブルのレイアウトもこれを使っています。多分（笑）

テーブルの実務例。

と、いうことでテーブルのデータをエクセルのようにみやすくするために、奇数と偶数のぞれぞれに違う色の背景色を適用させる記述例を書いておきます。

以下のCSSを使うと、奇数列には薄い色、偶数列には白を設定できます。

これにより、行ごとのデータが視覚的に区別でき、読みやすさが向上します。

/* 奇数列の背景色 */
table tr td:nth-child(odd) {
  background-color: #f2f2f2;
}

/* 偶数列の背景色 */
table tr td:nth-child(even) {
  background-color: #ffffff;
}

この方法で、テーブルのデータをより整理された形で表示できます。

 nを使った式で複数の要素を選択。

nth-childでは、nを使って複数の要素を指定することも可能です。

li:nth-child(2n) {
  background-color: lightgreen; /* 偶数番目のリストアイテム */
}

li:nth-child(3n+1) {
  font-weight: bold; /* 1, 4, 7番目のリストアイテムに太字 */
}

• 2nは偶数番目（2, 4, 6, …）の要素を選択します。
• 3n+1は3番目ごとの要素（1, 4, 7, …）を選択します。

これは、よく使います！覚えて、使えるようにしましょう。

ブログ記事のような、同じアイテムが複数並ぶレイアウトなどに使用します。

ブログ記事のように順次追加されていくレイアウトでは、あらかじめ規則的に要素を指定しておき、増減してもレイアウトが崩れないようにli:nth-child(3n+1) の記述を使ったりします。

範囲を指定する。

nth-childでは、nを使って範囲を指定することもできます。

li:nth-child(n+3) {
  font-size: 20px; /* 3番目以降のリストアイテム */
}

このコードは、3番目以降のアイテムにフォントサイズを設定します。

これも「nを使った式で複数の要素を選択」と同様に使用頻度の高い記述です。お覚えておきましょう！

実際に使ってみよう！リストアイテムにスタイルを適用。

ここでは、HTMLリストの例を使って、nth-childをどのように活用するかを実演します。

See the Pen nth-childの使い方。 by 1buk1 (@1buk1) on CodePen.

上記のCSSコードでは、以下のようなスタイルが適用されます。

• 偶数番目のアイテム（2番目、4番目）はライトイエローの背景色がつきます。
• 3番目のアイテムは赤色になります。
• 奇数番目のアイテム（1番目、3番目、5番目）は太字になります。

SCSSでの記述方法。

SCSSでは、CSSと同じ書き方ができますが、変数やネストを使って、より効率的にスタイルを管理することができます。

以下は、先ほどのCSSをSCSSで記述した例です。

$odd-background: lightgray;
$even-background: lightblue;
$highlight-color: red;

ul {
  li:nth-child(odd) {
    background-color: $odd-background;
    font-weight: bold;
  }

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

  li:nth-child(3) {
    color: $highlight-color; /* 3番目のアイテムを赤色に */
  }

  li:nth-child(2n) {
    background-color: lightgreen;
  }

  li:nth-child(3n+1) {
    font-weight: bold; /* 1, 4, 7番目のリストアイテムに太字 */
  }

  li:nth-child(n+3) {
    font-size: 20px; /* 3番目以降のリストアイテム */
  }
}

このSCSSコードでは、変数を使って色を管理しています。

$odd-backgroundや$even-backgroundの変数を使うことで、後から色を変更したい場合でも、一箇所だけを変更すれば済みます。

また、ネストを利用してulの中のliに対してスタイルを適用することで、より見やすく管理しやすいコードになります。

まとめ。

nth-childは、順番に基づいて子要素にスタイルを適用するための強力なツールです。

さらに、SCSSを使うことで、コードの可読性や再利用性が向上します。

奇数番目や偶数番目のアイテム、さらには特定のパターンに基づいてスタイルを変更することができ、より動的でスタイリッシュなWebデザインを実現できます。

ぜひ、上記の例を参考にして、実際に自分のプロジェクトに取り入れてみてください。