【入門編】 :nth-child(an+b) の詳細な計算式 – CSS実践ガイド

こんにちは！フロントエンドの現場を渡り歩いてきた、チーフアーキテクトの私です。

CSSを書き始めた頃、あなたもこんな壁にぶつかったことはありませんか？
「リストの3番目だけ色を変えたい」「偶数番目と奇数番目で背景色を交互に変えたい」「でも、要素が増減するたびにクラス名を書き換えるなんて絶対に嫌だ……！」

そんな時にお世話になるのが、今回お話しする構造的疑似クラス、その中でも最強にして最難関の`:nth-child(an+b)`です。

教科書を開くと、「$an+b$ の $n$ は0から始まる整数で〜」「インデックスが〜」なんて難解な数式が並んでいて、思そっとブラウザを閉じちゃいたくなりますよね。大丈夫ですよ、安心してください。今日は面倒な数学のテストの話は一切なしで、身近な例えを使いながら、この魔法の呪文の正体を丸裸にしていきましょう！

—

1. そもそも `:nth-child(an+b)` ってなに？（お弁当箱の例え）

まずは難しく考えず、イメージを膨らませてみましょう。
ここに、お弁当のおかずが綺麗に一列に並んでいるとします。唐揚げ、ブロッコリー、卵焼き、唐揚げ、ブロッコリー、卵焼き……。

この並びの中から、「決まったルールで特定のおかずだけをピックアップしたい」。そんな時に使うのが `:nth-child()` です。

括弧の中にある `an+b` という見慣れない文字は、ただの「命令のレシピ」だと思ってください。

• $n$（エヌ）：0から始まる「何番目かな？」というカウンター（0, 1, 2, 3…と勝手に進んでいきます）
• $a$：周期（いくつおきに？）
• $b$：はじまりの場所（どこからスタートする？）

このレシピ通りに、ブラウザくんが裏側でせっせと計算して、「あ、ここだな！」とターゲットの要素を見つけてくれているんです。

—

2. 怖くない！基本のパターンの使い方

それでは、実際のCSSコードを見ながら、よく使う定番のパターンをいくつか覗いてみましょう。

① シンプルな数字を指定する（例：`3番目` だけ赤くする）

まずは一番簡単なやつです。変数 $n$ すら使わず、ダイレクトに数字を指定しちゃいます。

/ リストの上から3番目のアイテムだけ文字を赤くする /
li:nth-child(3) {
color: #ff4757; / 鮮やかな赤色 /
}

「おや、これなら簡単じゃん！」って思いますよね。その調子です！

② 偶数・奇数を一撃でスタイリングする（`2n` と `2n+1` または `odd`, `even`）

テーブルのストライプ模様（しましまデザイン）で一番お世話になるやつです。

/ 偶数番目（2の倍数）の背景色を薄いグレーにする /
tr:nth-child(2n) {
background-color: #f1f2f6;
}

/ 奇数番目（2n+1）の背景色を白にする（odd と書いても同じです！） /
tr:nth-child(odd) {
background-color: #ffffff;
}

`2n` の $n$ に `0, 1, 2, 3…` を入れていくと、`0, 2, 4, 6…` となりますよね？
「あれ？0番目ってあるの？」と思いますよね。ここが初心者が一番つまずくポイントです。

実は、CSSのカウントは「1番目」から始まります。
計算結果が `0` 以下になった場合、それは「存在しないもの（または範囲外）」としてスルーされるだけなので安心してください。

• $n = 0$ のとき： $2 \times 0 = 0$ （該当なし）
• $n = 1$ のとき： $2 \times 1 = 2$ （2番目！）
• $n = 2$ のとき： $2 \times 2 = 4$ （4番目！）

こうして、綺麗に偶数だけが選ばれる仕組みになっています。

—

3. ちょっと応用編：3つおきにデザインを変えたい時

実務の現場では、「3つ並んだカードの、一番右端だけに特別なマージン（余白）を消したい！」といったグリッドレイアウトの調整で、この計算式が真価を発揮します。

「3つおき」を選ぶ：`3n`

/ 3番目、6番目、9番目…のアイテム /
.card:nth-child(3n) {
margin-right: 0; / 右端のカードだけ右マージンをゼロにする /
}

「2番目スタートで、3つおき」を選ぶ：`3n+2`

「いやいや、始まりの位置をずらしたいんだよ！」という時は、後ろの `+b` を調整します。

/
n=0 のとき: 3×0 + 2 = 2番目
n=1 のとき: 3×1 + 2 = 5番目
n=2 のとき: 3×2 + 2 = 8番目
つまり「2番目、5番目、8番目…」が選ばれます！
/
li:nth-child(3n+2) {
background-color: #70a1ff;
}

最初は呪文のように見えた `3n+2` も、こうして分解してみると「2番目を起点にして、3歩ずつ歩いていく」という可愛いルールに見えてきませんか？

—

4. 現場のプロがつまずきポイントをそっとサポート

最後に、現場で後輩たちがよくハマる「罠」をいくつかシェアしておきますね。

罠その1：「あれ、思った通りに動かない…？」と思ったら

`:nth-child()` は、「親要素の中にある、すべての兄弟要素」をカウントします。
例えば、以下のようなHTMLがあったとします。

「`p:nth-child(1)` にスタイルを当てたのに、効かない！」という事故が本当によく起きます。
なぜなら、1番目にいるのは `

` タグではなく `

` タグだからです。 もし「pタグの中だけで何番目」を指定したい場合は、近代的な疑似クラスである `:nth-of-type()` を使うか、HTMLの構造をシンプルにラップしてあげると一発で解決しますよ。 罠その2：マイナスの世界へようこそ（` -n + 3` の魔法）

「最初から3番目までのアイテムだけにスタイルを当てたい！」
そんな時は、マイナスを使ったこんな書き方ができます。

/ 1番目、2番目、3番目だけを選択する /
li:nth-child(-n + 3) {
font-weight: bold;
}

$n$ が増えていくとマイナスが大きくなってしまうので、結果的に「3番目、2番目、1番目」の頭から3つだけが綺麗にキャッチされます。これ、知っているとCSS設計のときにドヤ顔できるテクニックの一つです（笑）。

—

まとめ

`:nth-child(an+b)` は、最初は少し近寄りがたい数学の顔をしていますが、仲良くなってしまえば、あなたのデザインの表現力を何倍にも広げてくれる最高の相棒です。

最初は完璧に理解できなくても大丈夫。
「あ、偶数だから `2n` だっけ」「3つ並びの端っこだから `3n` かな」と、エディタで実際に数字をいじりながら、ブラウザのプレビューで「おっ、動いた！」という小さな成功体験を積み重ねていってください。

あなたのWeb制作ライフが、少しでも楽しく、色鮮やかなものになりますように。
それでは、次の現場でお会いしましょう！