【入門編】 :nth-last-child()による末尾からのインデックス指定 – CSS実践ガイド

こんにちは！日々Webデザインやフロントエンドのコードと向き合っている皆さん。今日もコード書き、本当にお疲れ様です。

CSSを学び始めると、誰もが一度は「この上から3番目の要素だけ色を変えたいな」とか「リストの最初の項目だけ余白を消したいな」という場面に出会いますよね。そんなとき、`:first-child` や `:nth-child(3)` といった便利な道具（疑似クラス）を覚えて、思い通りにデザインできたときは本当に嬉しいものです。

でも、実務の現場では、こんな少し意地悪なリクエストが飛んでくることがあります。

「新着記事のリストがあるんだけど、要素がいくつ増えても、常に『最後から2番目』の要素にだけ『NEW』の目印をつけたいんだよね」
「スマホ表示のとき、最後の2つの項目だけ、邪魔な下線を消してスッキリ見せたいな」

「えっ、リストの全体の数が決まっていない（動的に増えたり減ったりする）のに、後ろから数えるなんてどうすればいいの……？」と、頭を抱えてしまいそうになりますよね。

でも、大丈夫ですよ。CSSには、そんな「後ろからの逆算」をいとも簡単に、そしてスマートに解決してくれる魔法のような道具が用意されています。それが今回ご紹介する `:nth-last-child()` です。

今回は、この頼れる道具の使い方を、身近な例え話を交えながら、どこよりも優しく、一歩ずつ紐解いていきましょう！

—

1. 「後ろから数える」ってどういうこと？身近な例えでイメージしよう

まずは、難しく考えずに頭の中でイメージを膨らませてみましょう。

行列のできる大人気のクレープ屋さんを想像してみてください。お店の前に、お客さんが一列に並んでいます。

• `:nth-child(2)` は、列の 「先頭（前から）2番目」 の人です。
• `:nth-last-child(2)` は、列の 「最後尾（後ろから）2番目」 の人です。

 (イメージ：後ろから数えることで、列全体の人数が変わっても「最後尾の近く」をピンポイントで指し示せます)

もし列の人数が10人から15人に増えたとしても、「後ろから2番目の人」は常に、最後尾の人のすぐ前にいる人ですよね。

これが `:nth-last-child()` の最大の強みです。全体の数がいくつになろうが関係ない。常に「お尻から数えて◯番目」をキープしてくれる のです。

—

2. 基本の書き方を見てみよう！

まずは一番シンプルな書き方からマスターしましょう。
以下は、リストの「後ろから2番目」の要素だけ、背景を優しい桜色（ピンク）にするコードです。

実際にエディタに貼り付けて動かせるように、HTMLとCSSを用意しました。

HTML

• 東京（とうきょう）
• 有楽町（ゆうらくちょう）
• 新橋（しんばし）
• 浜松町（はままつちょう）
• 田町（たまち）
• 高輪ゲートウェイ（たかなわ）

CSS

/ リスト全体の見た目を少し整えます /
.station-list {
list-style: none;
padding: 0;
max-width: 300px;
}

.station-list li {
padding: 10px;
border-bottom: 1px solid #ddd;
background-color: #f9f9f9;
margin-bottom: 5px;
border-radius: 4px;
transition: all 0.3s ease;
}

/
ここが魔法のコードです！
「後ろから2番目」の要素だけ、背景をほんのりピンクにして、文字を太くします。
/
.station-list li:nth-last-child(2) {
background-color: #ffe4e6; / 優しいピンク /
color: #e11d48; / 濃いめのピンク /
font-weight: bold;
}

いかがでしょうか？
駅のリストがこれから増えて、最後に「品川」や「大崎」が追加されたとしても、このCSSがあれば自動的にその時点での「後ろから2番目」の駅がピンク色になります。

「いちいちクラス名を書き直さなくていいんだ！」と思うと、すごく頼もしく感じられますよね。

—

3. 実務でよくある「困った！」を解決する2つの応用パターン

基本がわかると、今度は「もっと実用的な場面でどう使うの？」という疑問が湧いてきますよね。現場で特によく使う、知っておくと一目置かれる2つのテクニックを紹介します。

パターンA：最後の2つだけ、邪魔な境界線（ボーダー）を消したい！

スマートフォンで2列に並ぶカード型のレイアウトを作るとき、一番下の段（最後の2つのカード）だけは、下側の余白や境界線を消してスッキリさせたいときがあります。

そんなときは、`:nth-last-child(-n+2)` という少し不思議な書き方を使います。

> 💡 ちょっと優しい算数のお話
> `-n + 2` という文字を見ると、「うっ、数学は苦手…」と身構えてしまいますよね。でも大丈夫、ゆっくり分解しましょう。
> CSSのルールでは、`n` には `0, 1, 2, 3…` と順番に数字が入っていきます。
> `n = 0` のとき： `-0 + 2 = 2` （後ろから2番目）
> `n = 1` のとき： `-1 + 2 = 1` （後ろから1番目＝最後尾）
> `n = 2` のとき： `-2 + 2 = 0` （0番目はないので無視されます）
>
> つまり、この式は「後ろから2番目と、後ろから1番目の両方（＝最後の2つすべて）」という意味になります！

実際のコードで見てみましょう。

/
リストの「最後の2つ」だけに、一括でスタイルを適用します。
ここでは、下側の線（ボーダー）を消して、すっきり見せています。
/
.station-list li:nth-last-child(-n+2) {
border-bottom: none;
background-color: #f1f5f9; / 最後の2つだけグレーにして目立たせなくする、といった調整も簡単です /
}

パターンB：「最後尾」を指定する `:last-child` と何が違うの？

「あれ？ 後ろから1番目って、`:last-child` と同じじゃないの？」と思ったあなた。
大正解です！ 素晴らしい洞察力ですね。

• `:last-child`
• `:nth-last-child(1)`

この2つは、全く同じ「一番最後の要素」を指します。
基本的には、一番最後を指定するときはシンプルで読みやすい `:last-child` を使えばOKです。

ただ、「最後から2番目、3番目」のように、1番目以外のお尻を狙い撃ちしたいときに、この `:nth-last-child()` が大活躍するのです。

—

4. 初学者がつまずきやすい「落とし穴」と、優しいフォロー

ここで、実際にコードを書いていて「あれ？思った通りに動かないな…」となったときのチェックポイントをお伝えしておきますね。

落とし穴：兄弟要素に「違うタグ」が混ざっていませんか？

`:nth-last-child()` は、「同じ親要素の中にいる、すべての子供たち」を後ろから数えます。
例えば、以下のようなHTMLがあったとします。

ここで `p:nth-last-child(1)` と書いても、`

ニュース2

` は赤くなりません。なぜなら、一番後ろ（後ろから1番目）にあるのは `` タグだからです。

「`p` タグの中で、後ろから数えたい！」というときは、また別の `:nth-last-of-type()` という、タグの種類を絞って数えてくれるお友達がいます。
「思った通りに動かないな」と思ったら、まずは「同じ階層に違うタグが混ざっていないかな？」と優しく自分に問いかけてみてくださいね。

—

まとめ：一歩ずつ、CSSと仲良くなっていきましょう

今日学んだことを、ギュッとまとめておさらいしましょう。

1. `:nth-last-child(n)` は、要素の「後ろ（末尾）」から数えてスタイルを当てる魔法。
2. リスト全体の数が動的に変わっても、常に後ろからの位置をキープしてくれるので、実務でめちゃくちゃ重宝する。
3. `(-n+2)` のように書けば、「最後の2つだけ」といった複数指定も自由自在。

最初は「カッコの中の書き方、忘れちゃいそうだな…」と思っても全然気にしなくて大丈夫です。私たちプロのエンジニアだって、今でもときどき「あれ、書き方どうだったっけ？」と検索しながら書いています（笑）。

大切なのは、「後ろから数えてデザインを整える便利な方法があったな」と頭の片隅に置いておくことです。

次にコーディングをするとき、この記事をそっと思い出して、エディタにコードを貼り付けてみてください。あなたのWebサイトが、よりスマートに、より美しく動く感動をぜひ味わってくださいね。

あなたのフロントエンドの旅が、もっと楽しく、実りあるものになりますように。応援しています！