【入門編】 nth-child疑似クラスの数式構文 – CSS実践ガイド

こんにちは！フロントエンド・アーキテクチャの現場を長年歩んできた私ですが、CSSを学び始めたばかりの頃は、セレクタの呪文のような書き方に何度も頭を抱えたものです。

特に、今日お話しする `:nth-child()` のような「数式」が出てくると、「うわっ、数学の授業が始まった……！」とそっとブラウザを閉じたくなる気持ち、痛いほどよく分かります。

でも、大丈夫ですよ！安心してください。
今日の記事を読み終わる頃には、あの複雑に見える呪文が、あなたの意のままに要素を操る「魔法の杖」に変わっているはずです。難しい数学の知識は一切いりません。身近な例えと一緒に、ゆったりリラックスして紐解いていきましょう。

—

1. `:nth-child()` って、そもそも何をするものなの？

Webサイトを作っていると、「リストのアイテムが並んでいるけれど、『3番目だけ色を変えたい』」とか、「テーブルの行（横のライン）を『1行おきにしま模様にしたい』」という場面に必ずと言っていいほど直面します。

そんなとき、一つひとつに `class=”item3″` とか `class=”even”` なんて名前をHTMLに書いていくのは、正直言ってめちゃくちゃ面倒ですよね。後から「あ、やっぱり間に新しい項目を追加しよう」となったときの大変さを想像すると、夜も眠れなくなってしまいます。

そこで登場するのが、CSSの `:nth-child()` 疑似クラスです。
これは、HTMLの親御さん（コンテナ）から見て、「上から数えて何番目の子どもか」を指定して捕まえるための強力なハンターだと思ってください。

「親から見て何番目」の “nth” と、「子ども」の “child” が合体した名前なんですね。

—

2. まずは基本の「偶数・奇数」からお散歩気分で始めよう

いきなり数式に行く前に、一番よく使う「偶数（even）」と「奇数（odd）」の指定から見ていきましょう。

例えば、お洒落なカフェのメニュー表や、見やすいデータの一覧表（シマウマの模様のように背景色を交互に変える、いわゆる「ゼブラストライプ」）を作るときによく使います。

このリストの背景を、1行おきに変えてみましょう。

/ 奇数番目（1, 3, 5番目）の子どもを狙い撃ち /
.menu-list li:nth-child(odd) {
background-color: #f9f9f950; / ちょっとだけ薄い色をつける /
}

/ 偶数番目（2, 4番目）の子どもを狙い撃ち /
.menu-list li:nth-child(even) {
background-color: #ffffff; / 真っ白 /
}

`odd` は英語の「奇数（オッド）」。1、3、5……と、上から数えて奇数番目の要素を優しくキャッチしてくれます。
`even` は英語の「偶数（イーヴン）」。2、4、6……と、偶数番目の要素をキャッチしてくれます。

これだけでも、「お、CSSって結構賢いじゃん！」と楽しくなってきませんか？

—

3. いよいよ本丸！「an+b」という呪文の正体を解き明かす

さて、ここからが本題です。
「3番目ごとに色を変えたい」「4番目以降をまとめてデザインしたい」といった、もう少しわがままな要望を叶えてくれるのが、噂の `an+b`（エーエヌ・プラス・ビー） という数式構文です。

なんだかアルファベットが出てきて急に難しそうに見えますが、恐れる必要はありません。身近な例えでサクッと理解しちゃいましょう。

身近な例え：お菓子の「詰め合わせパック」

スーパーのお菓子コーナーを想像してください。
「3個買うと、おまけが1個もらえるキャンペーン」をやっているとします。

`a` は、「何個おきに」 という周期（ステップ）を表します。
`n` は、「0, 1, 2, 3…」と増えていく回数（カウンター） です。
`b` は、「どこからスタートするか」 というオフセット（はじまりの場所）を表します。

これだけです！このルールに当てはめて、実際のコードを見てみましょう。

—

パターンA：3つに1つのペースで選ぶ (`3n`)

「3番目、6番目、9番目……と、3の倍数の要素だけを選びたい！」というときは、こう書きます。

/ 3の倍数番目のアイテムを赤くする /
li:nth-child(3n) {
color: #ff3366;
}

$n = 0$ のとき： $3 \times 0 = 0$ （該当なし）
$n = 1$ のとき： $3 \times 1 = \mathbf{3}$ （3番目！）
$n = 2$ のとき： $3 \times 2 = \mathbf{6}$ （6番目！）
$n = 3$ のとき： $3 \times 3 = \mathbf{9}$ （9番目！）

ね？数学というよりは、ただの「掛け算の九九」のノリですよね。

—

パターンB：「3つごと、しかも2番目スタート」 (`3n + 2`)

少しひねって、「3個おきに選びたいけれど、スタートを少しズラして2番目から始めたい」というとき。ここで後ろの `+b` が効いてきます。

/ 「2番目、5番目、8番目……」をキャッチする魔法 /
li:nth-child(3n + 2) {
font-weight: bold;
}

$n = 0$ のとき： $(3 \times 0) + 2 = \mathbf{2}$ （2番目！）
$n = 1$ のとき： $(3 \times 1) + 2 = \mathbf{5}$ （5番目！）
$n = 2$ のとき： $(3 \times 2) + 2 = \mathbf{8}$ （8番目！）

「3個おき（3n）に、2番目（+2）からスタートするよ」と、CSSに優しく語りかけるイメージです。

—

4. 現場でめちゃくちゃよく使う「実用テクニック集」

理論が分かったところで、実際のWeb制作の現場で「これを知っておくとドヤ顔できる」便利な書き方をいくつかご紹介しますね。

① 「最初の3つだけ」をスタイリングしたいとき (`-n + 3`)

「カード型のレイアウトで、上から並んだ最初の3枚だけ特別なバッジをつけたい！」というときは、マイナス（引く）の魔法を使います。

/ 上から3番目までの要素をゲットする /
li:nth-child(-n + 3) {
border: 2px solid #ffcc00;
}

$n = 0$ のとき： $0 + 3 = \mathbf{3}$
$n = 1$ のとき： $-1 + 3 = \mathbf{2}$
$n = 2$ のとき： $-2 + 3 = \mathbf{1}$

「マイナスがつくと逆から数えるんだな」となんとなく雰囲気が掴めればバッチリです！

② 「4番目以降をすべて」スタイリングしたいとき (`n + 4`)

「最初の3つは説明用だからそのままにして、4番目以降の子どもたちにスタイルを適用したい」というときも、数式で一発解決です。

/ 4番目から終わりまで、すべてをキャッチする /
li:nth-child(n + 4) {
opacity: 0.8;
}

$n = 0$ のときは 4 に満たないため無視されますが、$n = 1$ のとき（4番目）、$n = 2$ のとき（5番目）……と、4番目以降がすべて選択されます。これ、実務でめちゃくちゃお世話になります。

—

さいごに：間違えても、ブラウザの検証ツールで遊べば大丈夫！

`:nth-child()` の数式構文は、最初は誰だって「これで合ってるかな？」とドキドキしながら書くものです。私も昔は、書いてはブラウザをリロードし、違ったら書き直し……を何度も繰り返していました。

もし思い通りの場所が選べなくても、焦る必要は全くありません。
ブラウザの「検証ツール（デベロッパーツール）」を開いて、該当の要素をクリックしながら数式を `3n+1` にしたり `2n` にしたりと、リアルタイムで書き換えて遊んでみてください。

「あ、こう書くとここが光るんだ！」という発見の積み重ねが、あなたを確実なフロントエンドのプロへと導いてくれます。

今日からあなたのCSSファイルにも、この便利な魔法を取り入れてみてくださいね。応援しています！