【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が効かないときは、数え方を間違えています。

書き方は合っているのに、思ったところに当たらない。

原因はほぼひとつです。nth-child は「同じタグの中で何番目か」ではなく、「親要素の子の中で何番目か」を見ています。

次のHTMLで確かめてみます。

<div>
  <h2>見出し</h2>
  <p>1つ目のp</p>
  <p>2つ目のp</p>
  <p>3つ目のp</p>
</div>

この状態で、実際にどれが選ばれるかを調べた結果です。

p:nth-child(2) が選ぶのは、2つ目のpではなく1つ目のpです。

<h2> が1番目の子なので、pは2番目・3番目・4番目として数えられているからです。

p:nth-child(1) にいたっては、1番目の子がpではないので何も選ばれません。「書いたのに何も起きない」のは、たいていこれです。

偶数・奇数の指定も、同じ理由でずれます。

縞模様を作るときに、いちばん引っかかるところです。

even（偶数）を指定したのに、1つ目と3つ目が選ばれています。

pが2・3・4番目として数えられているので、そのうち偶数は2番目と4番目。つまり1つ目のpと3つ目のpになる、というわけです。

nth-child と nth-of-type の使い分け。

判断はかんたんです。

親の中身が同じタグだけで揃っているなら nth-child。混ざっているなら nth-of-type。

テーブルの tr やリストの li は同じタグしか入らないので、nth-child で問題ありません。この記事の前半で紹介した書き方が使えます。

逆に、見出しや画像が混ざるコンテンツ部分では、nth-of-type のほうが安全です。

first-child と last-child も同じです。

最初と最後を指定するときも、考え方は変わりません。

first-child が効かないときも、原因は nth-child と同じです。first-of-type に変えてください。

なお、上の表はすべてブラウザで実際に確認した結果です。迷ったら、検証ツールで当たっているかを見るのが確実です。

まとめ。

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

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

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

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