CSSを書き始めて少し経つと、誰もが一度はぶつかる壁があります。それが「リストの偶数番目だけ色を変えたい」「3つおきにレイアウトを調整したい」といった、規則的なデザインの指定ですよね。
そんなときに出会うのが、この呪文のような書き方。
`:nth-child(2n+1)`
「うっ、数学だ……。学生時代に赤点だったのに、なんでCSSで数式を見なきゃいけないの！」と、そっとブラウザのタブを閉じたくなる気持ち、痛いほどよく分かります。私も昔は、適当にネットからコピペして「なんか動いたからラッキー」で済ませていましたから。
でも、大丈夫ですよ。安心してください。
この`an+b`という構文、実は数学の複雑な計算ではなく、「何個ずつ飛ばして、どこからスタートするか」という、ただのお決まりの「ルール（歩数）」を表しているだけなんです。
今日は、この難敵に見える`:nth-child()`の正体を、身近な例え話と一緒に丸裸にしていきましょう！
—
そもそも `:nth-child()` ってなに？
`:nth-child()` は、親御さん（親要素）から生まれたたくさんの子どもたち（子要素）の中から、「上から数えて○番目の子！」とピンポイントで指名するための便利な疑似クラスです。
例えば、`li:nth-child(2)` と書けば、「リストの上から2番目のお前、ちょっとこっちに来い」と指名することができます。ここまでは「ふむふむ、簡単だな」と思えますよね。
問題は、このカッコの中に `n` という見慣れない文字が入ってきたときです。
—
`an+b` の正体を「階段のぼり」でイメージしてみよう
`:nth-child(an+b)` の `a` と `b`、そして `n` が何を表しているのか、みんなで小さなパズルを解くように見ていきましょう。
ここで登場するのが、「階段のぼりゲーム」です。
- `n`（エヌ）： 「0, 1, 2, 3, 4……」と、階段を1段ずつ上がっていくあなたの足（歩数）です。CSSが勝手に、0から順番にこの `n` に数字を代入してくれます。
- `a`（係数）： 階段を上がるときの「歩幅（何個飛ばしか）」です。
- `b`（定数）： 最初にどこからスタートするかという「最初の位置（オフセット）」です。
つまり、`an+b` は「$a$ 個ずつ飛ばしながら、$b$ 番目からスタートしてね」という、CSSへの命令文なんです。
—
具体例でスッキリ納得！よく使うパターンを見てみよう
百聞は一見にしかず。実際のコードを見ながら、この魔法のルールがどう動いているのかを覗いてみましょう。
1. `3n` （3個おきに色を変えたいとき）
「$a = 3$、$b = 0$（省略されている）」のパターンです。
スタート位置は0番目（つまり何もないところ）から始まり、3個ずつ進みます。
- $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番目）
「3番目、6番目、9番目……」と、3の倍数の要素だけが選ばれます。等間隔でレイアウトをキレイに整えたいときによく使います。
2. `3n + 1` （「1番目からスタートして、3個おき」）
さっきのルールに「$+ 1$（スタート位置）」が加わりました。これが実務ですちゃめちゃによく使います！
- $n = 0$ のとき： $3 \times 0 + 1 = \mathbf{1}$ （1番目）
- $n = 1$ のとき： $3 \times 1 + 1 = \mathbf{4}$ （4番目）
- $n = 2$ のとき： $3 \times 2 + 1 = \mathbf{7}$ （7番目）
「1番目、4番目、7番目……」が選ばれます。例えば、カード型のデザインを横に3列ずつ並べるとき、「各行の最初の子だけ左の余白をなくしたい！」という場合に大活躍します。
—
奇数（odd）と偶数（even）の正体を知ると、さらにスッキリ！
CSSには、わざわざ数式を書かなくてもいいように、便利なキーワードが用意されています。それが `odd`（奇数）と `even`（偶数）です。
実はこれ、先ほどの `an+b` 構文で完璧に説明がつくんです。
- 奇数： `odd` ＝ `2n + 1` と同じ意味
- $n=0$ なら 1番目、$n=1$ なら 3番目、$n=2$ なら 5番目……。
- 偶数： `even` ＝ `2n` （または `2n + 2`）と同じ意味
- $n=1$ なら 2番目、$n=2$ なら 4番目、$n=3$ なら 6番目……。
「テーブルの背景色を1行おきに変えたい（シマシマ模様にしたい）」というときは、あの難解な数式を思い出さなくても、`tr:nth-child(even)` とだけ書けば実装できちゃいます。優しい世界ですね！
—
実務でそのまま使える！お試しコード
それでは最後に、エディタにペタッと貼り付けてすぐにブラウザで確認できるサンプルコードを用意しました。
コメントを読みながら、「あ、こういうことね！」と感覚を掴んでみてください。
リスティングの装飾テスト
- リストアイテム 1
- リストアイテム 2 （ここは偶数なので青背景！）
- リストアイテム 3 （ここは3の倍数なのでオレンジの線！）
- リストアイテム 4 （ここは偶数なので青背景！）
- リストアイテム 5
- リストアイテム 6 （偶数かつ3の倍数！両方のルールが当たります）
- リストアイテム 7
- リストアイテム 8 （ここは偶数なので青背景！）
- リストアイテム 9 （ここは3の倍数なのでオレンジの線！）
—
まとめ
`:nth-child(an+b)` の `an+b` 構文、少しは怖さが和らいでしょうか？
- `n` は、0から始まる「あなたの歩数」
- `a` は、何個ずつ進むかの「歩幅」
- `b` は、どこから歩き始めるかの「スタート位置」
この3つさえ心に留めておけば、もう複雑なセレクタに怯える必要はありません。最初は「あれ、何番目だっけ？」と頭がこんがらがったら、紙に `1, 2, 3, 4…` と書き出して、当てはめてみてくださいね。
フロントエンドの世界は、こうした小さな「なるほど！」の積み重ねです。焦らず、自分のペースで一歩ずつ楽しんでいきましょう！
コメント