【入門編】 nth-last-child疑似クラスによる逆順選択 – CSS実践ガイド

こんにちは！フロントエンドの現場を渡り歩いてきた、シニアアーキテクトの私です。

CSSを書き始めたばかりの頃って、上から数える`nth-child`だけでも「うわ、なんか難しそう……」ってなりがちですよね。なのに今日は、さらにひねくれた（？）「後ろから数える」という謎の機能、`nth-last-child`のお話です。

「え、前から数えちゃダメなの？なんでわざわざ後ろから？」
そう思うのも無理はありません。でも大丈夫。身の回りのちょっとした日常に置き換えてみれば、この`nth-last-child`がどれほど私たちの救世主になってくれるか、すんなりと腑に落ちるはずです。

一緒にゆっくり紐解いていきましょう！

—

1. なぜ「後ろから数える」必要があるの？

想像してみてください。あなたは今、近所のスーパーのレジに並んでいます。
後ろから数えて「最後尾から3番目の人」には、なんと「お楽しみ抽選会への参加券」が当たるとしましょう。

このとき、レジに並んでいる人の総人数が「5人」のときもあれば、「10人」のときもあるし、夕方のピーク時には「25人」に増えるかもしれません。
もしあなたが店員さんだったら、前から3番目の人を数えますか？それとも、レジの出口（つまり最後尾）から数えますか？

圧倒的に、後ろ（出口側）から数えたほうがラクですよね。人数が何人増えようとも、「最後尾から3番目」の位置は絶対に変わりませんから。

Webサイトのリスト、たとえば「新着情報のトピックス」や「お買い物カゴのリスト」もこれと全く同じです。
ユーザーがボタンを押すたびに項目が増えたり減ったりする動的なリストでは、上（頭）から数えるよりも、下（お尻）から数えたほうが圧倒的に都合が良い場面がたくさんあるのです。それを叶えてくれるのが、今回主役の`nth-last-child`です。

—

2. `:nth-last-child` の基本のキ

書き方は、普段よく見る`nth-child`とほとんど変わりません。違うのは、数え始めるスタート地点が「一番最後（下）」だという点だけです。

/ リストの一番最後から数えて「1番目」の要素を選ぶ /
li:nth-last-child(1) {
/ ここにスタイルを書きます /
}

これ、実はよく使うCSSのテクニックである `:last-child` と全く同じ意味になります。
「じゃあ `last-child` でいいじゃん！」って思いますよね。その通り、1番目（つまり最後尾の1つだけ）を指定したいときは `last-child` で十分です。

この`nth-last-child`の真骨頂は、数字を変えたり、ちょっとした「マジック」を組み合わせたりしたときに発揮されます。次のセクションで、現場で思わず「おっ」と声が出るような実例を見てみましょう。

—

3. 実務で役立つ！動的リストでの活用シーン

例えば、お問い合わせフォームのエラーメッセージや、チャットアプリの吹き出し、あるいはショッピングカートの購入アイテム一覧を思い浮かべてみてください。

「最後の項目だけに、特別なデザイン（例えば、区切り線を消すとか、特別な余白をつけるとか）を施したい！」という要望は、Web制作の現場で本当によくあります。

でも、もしそのリストの項目数がJavaScriptなどで増えたり減ったりしたらどうでしょう？「前から何番目」という固定の指定では対応できませんよね。

実例：最後の3つのアイテムをまとめて特別扱いしたいとき

ここで `nth-last-child` の出番です。
「最後から数えて、3番目までのアイテム」をすべて選択したいときは、こんな風に書くことができます。

/ 最後から数えて3番目、2番目、1番目の要素にマッチする /
.item:nth-last-child(-n + 3) {
background-color: #fff9e6; / やさしい黄色い背景色を敷く /
}

「うわっ、出た！ `-n + 3` っていう呪文！」と身構えちゃいました？
大丈夫、怖くないですよ。これは数学のグラフのようなもので、CSSに「最後尾からカウントして、1番目、2番目、3番目の子たち、集まれー！」と伝えるための合言葉なんです。

実際にブラウザで動かせるコードを用意したので、コピペして試してみてください。

nth-last-childのデモ

アイテム 1（上から数えると普通）
アイテム 2
アイテム 3
アイテム 4（ここから下の3つが対象になります）
アイテム 5
アイテム 6（最後の要素）

このコードのすごいところは、仮にJavaScriptで「アイテム 7」「アイテム 8」と新しい項目が追加されたとしても、自動的に「常に下から最後の3つ」がオレンジ色の太字になり続けるという点です。手動でクラス名を付け替える必要なんて一切ありません。ブラウザが勝手に計算してくれます。

—

4. つまずきやすいポイントと温かいアドバイス

初心者の方が `nth-last-child` を使うとき、よくやってしまう「うっかりミス」が一つだけあります。それは、「HTMLの構造に別のタグが混ざっていること」です。

例えば、リストの中に「広告バナー」や「見出しタグ」がポツンと挟まっていると、CSSは「えっと、何番目だっけ……？」と混乱して、意図しない場所を装飾してしまうことがあります（※厳密には `nth-of-type` などの挙動との違いもありますが、まずはシンプルな兄弟要素で揃えるのが鉄則です）。

「あれ、うまく効かないな？」と思ったら、まずは焦らずブラウザの「検証ツール（デベロッパーツール）」を開いて、HTMLの構造をもう一度じっくり眺めてみてください。
「あ、親要素の中に違う種類のタグが混ざっちゃってたんだな」と気づくだけで、解決への道はすぐそこです。CSSは正直な言語ですから、HTMLの構造を整えてあげれば必ず期待通りに動いてくれますよ。

—

まとめ

最後に、今日のおさらいです。

`nth-last-child` は「後ろ（最後尾）から数える」ための疑似クラス。
リストの項目が増えたり減ったりする動的なレイアウトで真価を発揮する。
`-n + 数字` を組み合わせることで、「最後から〇番目まで」をまとめて指定できる。

最初はちょっぴり難解に感じる呪文のような書き方も、一度自分の手で書いてブラウザの画面が変わるのを見ると、「おっ、便利じゃん！」と頼もしい相棒に変わっていきます。

焦らず、一歩ずつ、あなたのペースでCSSとお友達になっていきましょう。
それでは、次のフロントエンドの冒険でお会いしましょう！チーフアーキテクトの私でした。