【入門編】 nth-child(an+b of selector) の構文 – CSS実践ガイド

こんにちは！CSSの泥臭い現場を駆け抜けてきたチーフアーキテクトの私ですが、今日は少し肩の力を抜いて、CSSを学び始めたばかりのあなたへ、とびきりワクワクする技術のお話をさせてください。

Webサイトを作っていると、「リストの上から3番目だけ色を変えたいな」「偶数番目だけデザインを変えたいな」なんて思うこと、ありませんか？
そんなときに頼りになるのが、おなじみの `:nth-child()` というセレクタです。

でも、この `:nth-child()`、ちょっとだけ不器用なところがあるんです。
「え、どういうこと？」って思いますよね。実はこれまでの `:nth-child()` は、「種類を問わず、上から何番目か」しか数えてくれなかったんです。

「classが `item` の要素だけを数えて、その中の偶数番目を選びたい！」と思っても、途中に違う種類のタグ（例えば `p` タグや `div` タグなど）が挟まると、計算が狂ってしまって大暴走……。現場のエンジニアたちを何度泣かせてきたことか。

「もっと賢く、特定の仲間だけをカウントしてくれたらいいのに！」
そんな私たちの長年の願いを叶えてくれる、救世主のようなすごい構文が誕生しました。それが今回ご紹介する `:nth-child(an+b of selector)` です！

—

難しい仕様書を読む前に、ちょっと身近な例えをさせてくださいね。

スーパーのレジに並んでいるところを想像してください。
そこには、一般の「お客さん（タグA）」と、お店の制服を着た「店員さん（タグB）」が、バラバラの順番で並んでいます。

昔ながらの `:nth-child(2)` は、「並んでいる順番に関係なく、とにかく前から2番目の人」を指します。だから、運悪く2番目に店員さんがいたら、店員さんが選ばれちゃいます。
一方、今回紹介する `:nth-child(2 of .customer)` は、「『お客さん』というグループだけに絞って、その中で前から2番目の人」をピンポイントで指名できるんです！途中に店員さんが何人割り込んでいようとも、お客さんだけでカウントしてくれます。

すごく賢くなっていませんか？これが、`of selector` という魔法の言葉の正体です。

—

さて、実際の書き方を覗いてみましょう。といっても、怖がらなくて大丈夫ですよ。基本の形はこうです。

/ 「セレクタに一致する要素」の中で、前からan+b番目のものを指す /
:nth-child(an + b of セレクタ)

「`an+b` ってなんだっけ…数学の授業みたいで頭が痛い…」と思ったそこのあなた！深呼吸してください。大丈夫ですよ、覚えるパターンはそんなに多くありません。

これに `of .item` のようなくるみをポンと乗せるだけで、一気に実用的なセレクタに生まれ変わるんです。

—

百聞は一見にしかず。実際にコードを書いて、その動きを見てみましょう。
以下のコードをあなたのエディタにコピーして、ブラウザで開いてみてください。

nth-child(of selector) の実験場

ブラウザで確認できましたか？
`class=”target”` がついている要素だけに注目して、その中の2番目と4番目がキレイにオレンジ色に染まったはずです。途中にいる「ふつうの要素」たちは、まるで透明人間かのように華麗にスルーされていますよね。

これ、昔のCSSだったらJavaScriptを動かしてクラスを付与し直したり、HTMLの構造を無理やり組み替えたりしていたような面倒なレイアウトも、CSS一発でスマートに解決できちゃうんです。最高に気持ちがいい瞬間です。

—

CSSを書いていると、「あれ、思った通りに動かないな……」と頭を抱える夜が必ずやってきます。私だって、いまだに時々やらかします。

そんなときは、今日の「お買い物のレジの列」の例えを思い出してみてください。
「いま、私はどのグループを数えようとしているんだっけ？」と立ち返るだけで、不思議とスッと答えが見えてくるはずです。

この `:nth-child(an+b of selector)` が使えるようになったことで、あなたのデザインの引き出しは確実に一つ増えました。ぜひ、日々のコーディングで気軽に試して遊んでみてくださいね。

あなたのWeb制作の旅が、もっと楽しく、もっと自由なものになりますように。
それではまた、次の現場でお会いしましょう！