【入門編】 :nth-child() の基本構文と引数 – CSS実践ガイド

こんにちは。フロントエンドの迷宮を案内するチーフアーキテクトです。

CSSを学び始めたばかりのとき、一番最初に「魔法みたいだ！」と感動するけれど、同時に「なんだか急に難しくなったぞ？」とつまずきやすいのが、この `:nth-child()` というやつです。

名前からして少し堅苦しいですよね。でも大丈夫。これは「並んでいるものの中から、特定の順番のやつだけを指名する」という、ただそれだけの便利なツールなんです。

今日は、この「指名」のルールを、お買い物の行列に例えて紐解いていきましょう。

—

想像してみてください。あなたは人気カフェの店員さんです。並んでいるお客さんに、「3番目の人だけクーポンを渡して！」とか「偶数番目の人にお冷を出して！」と指示を出したいとき、どうしますか？

CSSの `:nth-child()` は、まさにその「何番目の人に声をかけるか」を決める役割を持っています。

まずは一番わかりやすい、2つのキーワードから覚えましょう。

例えば、リストの背景色を交互に変えて、読みやすくしたいときによく使います。

/ 奇数番目のリストに薄いグレーの背景を塗る /
li:nth-child(odd) {
background-color: #f0f0f0;
}

/ 偶数番目のリストはそのまま（あるいは別の色に） /
li:nth-child(even) {
background-color: #ffffff;
}

「奇数と偶数」だけで、デザインの質はグッと上がります。まずはここからスタートして、CSSに慣れていきましょう。

—

さて、ここからが本題です。たまに「3番目から始まって、そこから3個飛ばしで色を変えたい」なんていう、ちょっと複雑な注文が飛んできます。ここで登場するのが、悪名高い（？）`an+b` という数式です。

でも、怖がらないでください。分解すればなんてことありません。

現場でよく使うパターンを3つだけ覚えておけば、大抵のことは解決できます。

`3n` と書くと「3の倍数」になりますが、`n+3` と書くと「3番目以降」という意味になります。

/ 3番目から、最後まで全部の要素にスタイルを適用 /
li:nth-child(n+3) {
color: blue;
}

これは少しテクニックが必要で、`-n+3` と書きます。

/ 最初の1番目、2番目、3番目だけを選ぶ /
li:nth-child(-n+3) {
font-weight: bold;
}

`3n+1` と書けば、「1番目から、3個飛ばし（1, 4, 7…）」という意味になります。

/ 1番目からスタートして、3つおきに色を変える /
li:nth-child(3n+1) {
border-left: 5px solid orange;
}

—

「なんでわざわざ数式なの？」と疑問に思うかもしれません。それは、HTMLの要素数がどれだけ増えても、ブラウザが自動的に計算してくれるからです。

もしこれが手動だったら、要素が増えるたびにクラス名を書き足さなければなりません。でも、`:nth-child()` なら、要素が10個でも100個でも、CSSはたった一行で済む。これこそが、保守性の高いCSSを書くための第一歩なんです。

もしうまく動かないときは、以下のことを確認してみてください。

1. 「何に対して」適用しているか？
`:nth-child` は「親要素の中にある、何番目の子要素か」を見ています。隣のリストと混ざっていないかチェックしましょう。
2. 数式は「n」を忘れずに
`3+1` と書いても動きません。必ず `3n+1` と「n」を入れましょう。

最初はパズルみたいに感じるかもしれませんが、書いているうちに「あ、これはこういうことか！」と直感的にわかる瞬間が必ず来ます。

Web制作は、こうやって一つずつ道具を増やしていく職人の仕事です。焦らず、まずは `odd` と `even` から遊んでみてくださいね。あなたの書くコードが、誰かの目に優しく届くことを応援しています。