こんにちは！フロントエンドの現場を渡り歩いてきた、シニアアーキテクトの私です。
CSSを書き始めたばかりの頃って、セレクタの多さにめまいがしませんか？「あれもこれも指定したいのに、なぜか意図しないところまで色が変わっちゃう…」なんて泥沼にハマって、パソコンの前頭を抱えた夜、誰しもありますよね。
大丈夫ですよ、安心してください。今日はそのモヤモヤをスッキリ解消する、ちょっと通な秘密兵器`:nth-last-of-type`（エヌ・スルー・ラスト・オブ・タイプ）についてお話しします。
呪文のような長い名前ですが、コツさえ掴めば、あなたのCSSライフを劇的に楽にしてくれる頼もしい相棒になりますよ。それでは、一緒に紐解いていきましょう！
—
1. そもそも `:nth-last-of-type` ってなに？（お買い物行列の例え）
まずは、この長ったらしい名前を日本語に翻訳してみましょう。
- nth：何番目か（NumberのN）
- last：後ろから
- of-type：同じ種類の要素の中で
つまり、「同じHTMLタグの種類の中で、後ろから数えて何番目かを指定する」という疑似クラスです。
ここで、身近な例えを一つ。スーパーのレジの行列を想像してください。
前から順番に並ぶのも大事ですが、店員さんが「後ろから数えて3番目までの方に、おまけの飴ちゃんを配りまーす！」と言ったとします。このとき、行列全体の何番目かではなく、「お客さん（同じ種類）」というくくりの中で、後ろから逆算してカウントしていますよね。
あれと同じことを、CSSでやってくれるのが `:nth-last-of-type` なんです。
—
2. なぜ普通の `:nth-of-type` じゃダメなの？現場の切実な理由
CSSには、前から数える `:nth-of-type` という兄弟もいます。「じゃあ、前からで十分じゃない？」って思いますよね。
でも、実際のWeb制作現場では、こんな絶望的なシチュエーションによく遭遇します。
- ブログの記事一覧や、ECサイトの商品リストで、「最後の3件だけ」特別な背景色をつけたい。
- でも、CMS（WordPressなど）の仕様上、リストの総数が「3件のときもあれば、12件のときもある」みたいに変動してしまう。
総数が分からないのに、「上から○番目」と指定するのは不可能です。ここで絶望してJavaScriptに逃げたくなるのですが…ちょっと待ってください。そんなときこそ、後ろからカウントできる `:nth-last-of-type` の出番なのです！
—
3. 実践！コードで見てみよう
百聞は一見にしかず。具体的なコードを見てみましょう。
今回は、よくある「ニュースやお知らせのリスト」を想定してみます。リストの総数がいくつであっても、「下から数えて最後の2つのアイテム」にだけ、ちょっと目立つスタイルを適用してみましょう。
- 新着情報：サイトをリニューアルしました
- メンテナンスのお知らせ：来週水曜日の深夜
- 夏季休業のご案内
- 【重要】プライバシーポリシー改定について
- 本日のおすすめ商品を追加しました
/ CSS：後ろから数えて「2番目」と「1番目（一番最後）」を狙い撃つ！ /
.news-list li {
padding: 12px 16px;
border-bottom: 1px solid #eee;
color: #333;
}
/ 後ろから数えて2番目と1番目の要素を指定 /
.news-list li:nth-last-of-type(-n + 2) {
background-color: #fff9e6; / やさしい黄色い背景 /
font-weight: bold; / ちょっと太字にする /
}
このコードの魔法を解説します
ここで出てきた `-n + 2` という書き方、数学のテストみたいで少しドキッとするかもしれません。でも、意味が分かるとすごくシンプルです。
- `n` には `0, 1, 2, 3…` と数字が入っていきます。
- `-n + 2` を計算すると、後ろから数えて…
- `n = 0` のとき：`-0 + 2 = 2` （後ろから2番目）
- `n = 1` のとき：`-1 + 2 = 1` （後ろから1番目＝一番最後）
- `n = 2` のとき：`-2 + 2 = 0` （対象外になるのでストップ）
結果として、「後ろから2番目」と「一番最後」の2つの要素だけが選ばれるという仕組みになっています。総数が何個あろうと、常に「後ろからカウントして指定の個数」を綺麗に掴んでくれるんです。これ、すごくスマートだと思いませんか？
—
4. 実務でよくある「うっかりミス」と回避のコツ
さて、ここまで読んだあなたなら、もう明日からでも現場でバリバリ使えます。ただ、プロの現場で私たちがよくやらかす「つまずきポイント」を一つだけシェアさせてください。
注意点：指定するのは「タグの種類」単位
`:nth-last-of-type` は、同じタグ（要素）のグループの中でカウントします。
例えば、以下のようなHTMLがあったとします。
テキスト1
テキスト2
ここに別のタグが混ざっている！
テキスト3
ここで `p:nth-last-of-type(1)` と書いた場合、`span` タグは `p` タグとは別の種類（type）として無視され、`p` タグの中だけで後ろからカウントされます。そのため、「テキスト3」がターゲットになります。
「あれ、思った通りに選ばれないな？」と思ったときは、HTMLの構造の中で、ターゲットが何のタグに囲まれているか（of-typeの条件に合っているか）をもう一度そっと覗いてみてくださいね。
—
5. おわりに
CSSの疑似クラスは、最初は複雑な呪文に見えるかもしれません。でも、一つひとつの意味を紐解いていくと、ブラウザにお願いするための「優しくて的確なお願いの言葉」であることが分かります。
今回ご紹介した `:nth-last-of-type` は、動的に変わるレイアウトや、「最後尾の要素だけ調整したい！」という泥臭いデザインの要望を、エレガントに解決してくれる心強い武器です。
ぜひ、あなたのローカル環境のエディタにコピーして、数字をいじりながら遊んでみてください。「おっ、ちゃんと後ろから動いた！」という小さな感動の積み重ねが、あなたを確実なCSS使いにしてくれますよ。
それでは、また次回のフロントエンド・ラボでお会いしましょう！快適なコーディングライフを！
コメント