CSSの「魔法の杖」を使いこなせ：`:nth-child()` の数式で制御するDOMの未来
やあ。現場でCSSと格闘している君なら、一度は「3つ目以降の要素だけスタイルを変えたい」「交互に色をつけたい」という、一見単純そうでいて地味に厄介な要求に頭を抱えたことがあるはずだ。
その際、JSでループを回したり、クラスを乱発したりしていないだろうか？ もしそうなら、今日でその泥臭い作業とはおさらばだ。CSSの `:nth-child()` という強力な武器について、仕様の深淵と実務での「使いこなし方」を伝授しよう。
—
`:nth-child(an+b)` の「an+b」は、ただの数式じゃない
多くのエンジニアは `:nth-child(2n+1)` を「奇数」と暗記しているかもしれない。だが、この数式が何を意味しているかを理解すれば、柔軟性が段違いになる。
- `a` (係数): 繰り返しの周期（ステップ数）。
- `n` (変数): 0から始まる非負の整数（0, 1, 2, 3…）。
- `b` (オフセット): 開始位置。
ブラウザのレンダリングエンジンは、これを見つけると「0, 1, 2…」と `n` を代入し、合致するインデックスの要素を抽出する。つまり、`3n+1` と書けば、「1, 4, 7…」というふうに、3つ飛ばしで最初の要素を指し示すわけだ。
数学的に見れば、これは「等差数列」そのもの。このロジックを直感的に操れるようになると、グリッドレイアウトの制御や複雑なリスト装飾が、わずか一行のCSSで完結するようになる。
現場で即戦力となる「コピペ用」スニペット
実務でよく遭遇するパターンをまとめておいた。これらは、そのまま君のスタイルガイドに組み込めるクオリティだ。
/ 1. 基本の交互色（ストライプデザイン） /
/ odd（奇数）は 2n+1、even（偶数）は 2n と同義 /
.list-item:nth-child(even) {
background-color: #f9f9f9; / 偶数番目に薄いグレーを敷く /
}
/ 2. 3つずつグループ化するデザイン /
/ 3n+1 なので、1, 4, 7… が対象。カラムレイアウトの調整に重宝する /
.grid-item:nth-child(3n+1) {
margin-left: 0; / 各行の先頭要素から左マージンを消す /
}
/ 3. 「最後からN番目」を攻略する /
/ 最後の3つだけを強調したい場合など。意外と知らない強力なテクニック /
.item:nth-last-child(-n+3) {
font-weight: bold; / 最後の3つだけ太字にする /
}
/ 4. 特定の範囲を狙い撃つ /
/ 5番目から10番目までを青くする（n+5 が5番目以降、-n+10 が10番目まで） /
.item:nth-child(n+5):nth-child(-n+10) {
color: royalblue;
}
ブラウザの裏側で起きていること：なぜ「要素の種類」に注意が必要なのか
ここが中級者とプロの分かれ道だ。`:nth-child()` は、「親要素内のすべての兄弟要素を含めてカウントする」という仕様になっている。
もし、君が `div > p:nth-child(2)` と書いたとき、親の中の2番目が `
` ではなく `` だった場合、このセレクタはマッチしない。
「あれ、なぜかスタイルが当たらない？」と悩んだときは、ブラウザのデベロッパーツールを開いて、親要素の中に何が並んでいるか確認してほしい。もし「タグの種類に関わらず、pタグだけをカウントしてほしい」という場合は `:nth-of-type()` を使うのが正解だ。
シニアからのアドバイス：保守性を高めるために
最後に、チーム開発における心得を一つ。
`nth-child` は非常に強力だが、数字を直接書きすぎると「仕様変更」に弱くなる。例えば「4つずつ並べていたものを5つに変更する」となったとき、CSSのあちこちに `4n+1` が散らばっていると地獄を見ることになる。
- 変数の活用: もしSass等のプリプロセッサを使っているなら、変数として定義しておくこと。
- 意味のあるクラス名: `nth-child` を使うときは、その構造が将来的に頻繁に変わるのか、固定的なものなのかを見極めてくれ。
「CSSは書く量よりも、どれだけ変更に強いか」が価値を決める。`:nth-child()` を使いこなせば、DOM構造を汚さずにエレガントなUIが作れるはずだ。
さあ、エディタに戻って、君のコードを一段上のレベルへ引き上げてみてくれ。応援しているよ。
コメント