【入門編】 :nth-child(odd) と :nth-child(even) – CSS実践ガイド

こんにちは！フロントエンドの現場で日々CSSと格闘しているエンジニアです。

CSSを学び始めたばかりの頃、誰もが一度は「これ、どうやって色を交互に変えるの？」という壁にぶつかります。そんな時、救世主のように現れるのが今回紹介する `:nth-child`（エヌス・チャイルド）という強力なツールです。

難しそうな名前ですが、安心してください。実は「並んでいるものに番号を振って、奇数か偶数か選ぶだけ」という、とってもシンプルなお話なんです。

—

想像してみてください。あなたは今、人気のお菓子屋さんの行列の整理係です。
「奇数番目のお客さんには青いステッカーを、偶数番目のお客さんには赤いステッカーを配ってください」と頼まれたら、どうしますか？

きっと、前から順番に「1番（奇数）、2番（偶数）、3番（奇数）……」と数えていきますよね。CSSの `:nth-child` は、まさにこの作業を自動でやってくれる「整理係」なんです。

これを使うだけで、リストやテーブルがグッと見やすく、プロっぽく変身します。

—

百聞は一見にしかず。さっそくエディタを開いて、こんなコードを書いてみてください。お買い物のリストをイメージした、ストライプ状のデザインです。

/ CSS: 整理係の出番です /
li {
padding: 10px;
border-bottom: 1px solid #ccc;
}

/ 奇数番目（1, 3, 5…）を薄いグレーに /
li:nth-child(odd) {
background-color: #f9f9f9;
}

/ 偶数番目（2, 4, 6…）を少し濃いグレーに /
li:nth-child(even) {
background-color: #eee;
}

たったこれだけで、リストが交互に色分けされ、視線が迷子にならない親切なデザインになりました。

—

初学者の皆さんがよく躓くポイントが一つだけあります。それは「要素が混ざっている時」です。

例えば、`

`の中に「見出し（h2）」と「段落（p）」が混ざって並んでいるとします。その時、`:nth-child` は「とにかく順番に並んでいるものすべて」を数えます。

「段落だけ選んだはずなのに、なぜか1番目がスキップされてる……？」と悩んだら、それは「1番目にh2がいるから、段落としては2番目（偶数）として数えられちゃったんだな」と気づいてあげてください。

もし「段落だけをカウントしたい！」という場合は、`:nth-of-type` という兄弟分を使うのが正解です。でも、まずは今回の `:nth-child` で「順番に数える感覚」をしっかり掴んでくださいね。

—

最初は暗号のように見えたCSSのコードも、こうして「整理係が順番に番号を振っている」とイメージすれば、少しだけ身近に感じられませんか？

Web制作において、この「見やすさ」をコントロールする技術は、どんなに時代が変わっても必ず役に立つ一生モノのスキルです。今日のコードをコピーして、色をオレンジやブルーに変えて遊んでみてください。

「あれ、ここを変えたらどうなるんだろう？」というその好奇心こそが、最高のエンジニアへの第一歩です。また分からないことがあれば、いつでも聞きに来てくださいね。応援しています！