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

やあ。フロントエンドの迷宮を今日もさまよっている諸君、お疲れ様。

CSSを書いていると、「リストの最後から数えて特定の要素にスタイルを当てたい」というシーンに遭遇しないか？例えば、「リストが3つ以上ある場合のみ、最後から2番目までボーダーを引く」とか、「最後の要素だけ余白を消す」といったケースだ。

`last-child` や `nth-last-child` は有名だが、今日はあえて少しニッチで、かつ強力な `:nth-last-of-type()` について深掘りしようと思う。この疑似クラスを使いこなせるようになると、DOM構造が少し複雑になっても、JavaScriptに頼らずCSSだけでスマートに解決できる武器が増えるぞ。

—

:nth-last-of-type() とは何か？その「型」の重要性

まず、仕様を整理しておこう。`:nth-last-of-type(n)` は、「親要素の中で、そのタグ名と同じ型の要素のうち、後ろから数えてn番目のもの」を選択する。

ここでの鍵は「型（type）」という言葉だ。`nth-last-child` が「兄弟要素の中で単純に後ろから何番目か」を数えるのに対し、`nth-last-of-type` は 「特定のタグ（`div`や`p`など）だけをピックアップして、その中での順序をカウントする」。

この違いは実務で非常に重要だ。例えば、リストの中にたまに挿入される広告や注釈用の `div` が混じっていたとしても、`p:nth-last-of-type(1)` なら、ちゃんと `p` タグだけのリストの中で最後の要素を選んでくれる。この「ノイズを無視できる」という特性こそが、僕らがこのセレクタを愛する理由の一つだ。

—

ブラウザの裏側で何が起きているのか？

ブラウザのレンダリングエンジンは、CSSルールが適用されるたびにDOMツリーを走査している。`nth-last-of-type` が呼び出されると、ブラウザはまず対象のタグ名（`div`など）を特定し、その親要素の全子要素を逆方向（末尾から）にスキャンし始める。

ここで中級エンジニアの諸君に意識してほしいのは、「パフォーマンスとDOMの汚染」だ。
このセレクタは、親要素内の要素数が増えれば増えるほど、当然ながら計算コストは上がる。とはいえ、今のモダンブラウザは非常に優秀だ。ただ、複雑な構造でこれを多用しすぎると、再レンダリングのたびにエンジンが必死にカウントし直すことになる。

「動けばいい」ではなく、「なぜこのセレクタを使うのが最適解なのか」を考えながら書くのが、プロの嗜みだ。

—

実践サンプル：可変リストの余白管理

現場で最もよく使う「リストの最後から数えて〜」というパターンをコードにしてみた。

/ リストアイテムが可変の時の実践的なスタイル /
.list-item {
/ 基本は全要素に下の余白を持たせる /
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}

最後の2つだけ特別なスタイルを当てたい場合
例：最後から1番目と2番目の要素だけ、ボーダーを消すという設計

/
.list-item:nth-last-of-type(-n+2) {
border-bottom: none;
margin-bottom: 0;
}

解説：
:nth-last-of-type(-n+2) は、「最後から1番目」と「最後から2番目」を選択する魔法の式だ。
負の値を使うことで、範囲指定ができるようになる。

—

現場で膝を打つためのTips

1. 「not」との組み合わせは最強の盾になる

`:not()` と組み合わせることで、「最後から数えてn番目以外」という除外条件が作れる。
例えば、「最後から3つ目以降の要素には全部矢印アイコンをつけたいが、後ろの2つには出したくない」といったデザイン要件も、この組み合わせなら一行で済む。

.item:not(:nth-last-of-type(-n+2))::after {
content: “→”; / 最後から3番目以前の要素すべてに矢印をつける /
}

2. 要素が混在するDOMでの注意点

`nth-last-child` を使うと、途中に `` が入っただけでカウントがずれて崩壊するが、`nth-last-of-type` は「型」を見るので、その `` を無視してくれる。「DOM構造を純粋に保てない時」の保険として、この疑似クラスを思い出してほしい。

—

最後に：CSSは「設計」である

CSSはただの装飾じゃない。DOM構造と対話するための、一つの「論理」なんだ。
`nth-last-of-type` のようなセレクタを使いこなすということは、HTMLを無闇にクラス名で汚染せず、構造的な美しさを保ったままスタイリングができるようになるということだ。

「クラスを足せばいいや」と安易にHTMLを書き換える前に、一度立ち止まって考えてみてほしい。「この関係性は、CSSの構造的疑似クラスで表現できないか？」と。

その問いかけが、君を一段上のエンジニアへと引き上げてくれるはずだ。また現場で会おう。健闘を祈る。