【実務・中級編】 nth-last-of-type疑似クラスの活用 – CSS実践ガイド

` など）」 を基準にグループ化してカウントする。ここを混同すると、期待通りのスタイルが当たらなくて深夜に頭を抱えることになるので注意してほしい。

ブラウザは裏側でどう処理しているか？

少しエンジニアっぽい話をしよう。ブラウザのレンダリングエンジン（BlinkやGeckoなど）は、DOMツリーを構築した後、スタイルを適用する「スタイル計算（Style Recalculation）」のフェーズに入る。

このとき、ブラウザは親要素（Parent Node）が持つ子要素のリストを走査するわけだが、`:nth-last-of-type` が指定されていると、末尾の要素から逆順にインデックスを付与していく。
「後ろから数える」という仕様上、DOMの末尾から数え上げるため、動的に要素が追加・削除されるリスト（例えばチャットのメッセージログや無限スクロールのタイムラインなど）において、「常に最後のN個」を効率よく特定できるという強力なメリットがあるんだ。

—

2. 実務でなぜこれが「神」なのか？（利用シーン）

実務でフロントエンドを書いていて、こんな絶望を味わったことはないか？

> 「CMSから出力される記事詳細の本文（`article`内）で、最後の3つの段落だけに特別な余白や注意書きのスタイルを当てたい。でも、マークアップ構造が動的すぎてクラスを付与するフックがない……！」

こういうとき、クラス名に頼ろうとすると、JavaScriptでゴリゴリDOMを操作してクラスを付与するか、CMS側のレンダリングロジックを書き換えるハメになる。どちらも保守性を下げる悪手だ。

ここで `:nth-last-of-type` の出番だ。これを使えば、HTMLを一行も汚さずに、純粋なCSSだけで「後ろから〇番目」を正確に射抜くことができる。

—

3. 実践！コピペで使えるキレイなサンプルコード

百聞は一見にしかずだ。実務でそのまま使える、洗練されたコードパターンをいくつか見せよう。

パターンA：可変長のリストで「最後から3番目以内」の要素にスタイルを適用する

例えば、検索結果や通知リストなどで、下から数えて直近の3件を目立たせたいときのイディオムだ。

• システムメンテナンスのお知らせ（古い）
• プロフィール画像が更新されました
• 新しいメッセージが届いています（直近3）
• セキュリティアラート（直近2）
• タスクの期限が近づいています（直近1）

.notification-list {
list-style: none;
padding: 0;
margin: 0;
}

.notification-list li {
padding: 16px;
border-bottom: 1px solid #eee;
}

/
後ろから数えて3番目、2番目、1番目（つまり最後の3つ）の

/ 一番最後の要素だけ下線を消すなどの微調整も簡単 /
.notification-list li:last-of-type {
border-bottom: none;
}

パターンB：異なるタグが混ざる複雑なコンポーネントでの罠を回避する

実務で一番ハマるのがこれだ。フォームのバリデーションメッセージなどで、`

` タグや `` タグが混在しているケースを考えてみよう。

ここで「最後の段落（`

` タグ）」だけに特別なスタイルを当てたいとする。
素人がやりがちなミスが `:last-child` や `:nth-last-child(1)` を使うことだ。これらは「要素の種類を問わず親から見て最後の子供」を選ぶため、もし将来的に `