【入門編】 :nth-last-child() 擬似クラス – CSS実践ガイド

CSSの世界へようこそ！フロントエンドの現場で長年コードを書いてきましたが、今日はCSSの中でも少しだけ「ひねくれ者」だけど、知ると最高に頼りになるやつ、`:nth-last-child()` についてお話ししますね。

「前から数える」のは簡単だけど、「後ろから数える」ってなんだか少し想像しにくいですよね。でも大丈夫。身近な例えと一緒に、この子の使い方をマスターしていきましょう！

—

一言でいうと、「行列の最後尾から数えて何番目？」を指定できる魔法の杖です。

普通、Webサイトのリストやカードを並べる時、私たちは「左から1番目、2番目…」と考えがちですよね。でも、例えば「このリストの、最後から3つ目だけ色を変えたい！」というシチュエーションが、実は現場では頻繁に起こるんです。

想像してみてください。スーパーの長いレジの行列です。

前から数えると「今何人が並んでいるか」を把握しないといけませんが、後ろから数えるなら「最後尾の人」は常に最後尾ですよね。この「合計人数がわからなくても、後ろから指定できる」という強みが、`:nth-last-child()` の最大の魅力なんです。

—

さっそく、コードを見てみましょう。リストの「最後から2番目」を赤くする例です。

/ リストの中の「後ろから数えて2番目」の要素だけを赤くする /
li:nth-last-child(2) {
color: red;
font-weight: bold;
}

どうでしょう？ `li` の数が増えたり減ったりしても、常に「最後から2番目」が自動的に赤くなります。もしこれを前から指定しようとすると、「全部で何個あるか」を数えて計算しなきゃいけませんよね。そんな面倒なこと、コンピュータに任せてしまいましょう！

—

初心者の頃、僕もここで何度も躓きました。皆さんに同じ苦労はさせたくないので、注意点をシェアしますね。

プログラミングの世界では「0から数える」ことが多いですが、CSSの擬似クラスは「1から数える」のがルールです。

このセレクタは「その親の中にある要素」を純粋に数えます。もしリストの中に `

` 以外のもの（例えば `

` や `

`）が混ざっていると、それらも含めて数えてしまうことがあります。
「リストの最後から…」と決め打ちしたいときは、構造をシンプルに保つか、クラス名を工夫するのが現場の知恵です。

—

最後に、プロの現場でよく使う「ちょっと気の利いた」使い方を紹介します。

「リストが3つ以上あるときだけ、最後の要素に余白をつけない」

これ、よくあるデザインの悩みですよね。そんな時もこれ一つで解決です。

/ 最後の要素（last-child）に下の余白を消す設定 /
li:last-child {
margin-bottom: 0;
}

/ 応用：最後から3つ目以降の要素には、特定のスタイルを当てる /
li:nth-last-child(n+3) {
border-bottom: 1px solid #ccc;
}

`n+3` という書き方は、「3番目以降（最後から数えて3つ目、4つ目…）」という意味になります。これを使えば、スマホやPCで要素数が変わっても、デザインを崩さず綺麗に表示させることができます。

—

CSSを書いていると、「あれ？思った通りにならないな」と悩む夜もあるはずです。でも、それはあなたが真剣に向き合っている証拠。`:nth-last-child()` も、最初は難しく感じるかもしれませんが、まずは「後ろから数えるやつだ！」と思い出すだけで十分です。

触ってみて、失敗して、また触ってみる。その繰り返しの中で、いつの間にか「ああ、ここは `nth-last` が使えるな」と直感的にわかるようになります。

焦らず、楽しんで書いていきましょうね。あなたのコードが、世界を少しだけ便利で美しくしますように！応援しています。