【実務・中級編】 nth-last-of-type擬似クラスの仕組み – CSS実践ガイド

CSSの「後ろから数える」魔術：`:nth-last-of-type` を使いこなせば、レイアウトの苦労は半分になる

フロントエンドの現場で、こんな場面に遭遇したことはないだろうか？
「リストの最後の要素だけ余白を消したい」「一番下の要素だけ色を変えたい」。そんなとき、JavaScriptでDOMを操作したり、`last-child` を使って「やっぱり途中で要素が増えて崩れた！」と頭を抱えたりする。

CSSを書くとき、私たちはつい「先頭から」物事を考えがちだ。しかし、UIの柔軟性を担保したいなら、「末尾から数える」という視点を持つだけで、コードは劇的に堅牢になる。今日は、CSSの隠れた名脇役 `:nth-last-of-type` について、現場のリアルな知見を共有しようと思う。

—

1. なぜ `:nth-last-of-type` なのか？

まず仕様を整理しよう。`nth-last-of-type(n)` は、「同じ親要素内にある、同じタグ型の要素を末尾からカウントして選択する」擬似クラスだ。

ここで重要なのは `of-type` という言葉だ。`nth-last-child` との違いは、「型（タグ名）」を考慮するかどうかにある。

• `:nth-last-child`: 親の中の「何番目の子か」を数える。間に別のタグ（例えば `

  ` と `

  ` が混在）が入ると、計算が狂う。
• `:nth-last-of-type`: 親の中の「同じタグ型の要素」だけをフィルタリングして、後ろから数える。

実務において、DOM構造がCMSの自動生成や動的なコンポーネントで多少不規則になることは珍しくない。そんな環境下で「最後から2番目の要素」を確実に捕まえるには、`nth-last-of-type` が最強の武器になるんだ。

—

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

ブラウザのレンダリングエンジン（BlinkやWebKitなど）は、スタイルを適用する際、DOMツリーを走査する。`nth-last-of-type` が指定されると、ブラウザは「その要素の親が持つ子要素リスト」を逆順にたどり、マッチするタグ型のインデックスをカウントする。

これを聞くと「パフォーマンスが悪いのでは？」と心配するベテランもいるが、現代のブラウザは高度に最適化されている。数千件のリストでもない限り、オーバーヘッドを気にする必要はない。それよりも、「条件分岐のロジックをCSS側に逃がす」ことで、JavaScriptの再描画コストを抑えるほうが、フロントエンドのパフォーマンスとしては賢い選択だと言える。

—

3. 実践：現場で即戦力となるテクニック

よくある「リストのセパレーター問題」を例に見てみよう。最後の要素にはボーダーを引きたくない、というケースだ。

/ リストの各アイテムに下線を引く /
.list-item {
border-bottom: 1px solid #ccc;
}

/ 最後の要素だけボーダーを消す（おなじみのlast-of-type） /
.list-item:last-of-type {
border-bottom: none;
}

/ ★応用：最後から3つ目までを強調する（キャンペーン期間中のみなど） /
/ 逆順でカウントするため、要素数が増えても常に「後ろから3つ」が選択される /
.list-item:nth-last-of-type(-n + 3) {
background-color: #fff3cd; / 警告色などでハイライト /
}

なぜ `nth-last-of-type(-n + 3)` と書くのか？

この数式（An+B記法）は少しコツがいる。`-n + 3` と書くと、ブラウザは n に 0, 1, 2… を代入する。

• n=0 のとき: 3
• n=1 のとき: 2
• n=2 のとき: 1

つまり、「最後から1番目、2番目、3番目」が選択される。この数式を覚えておくだけで、動的なリストの制御は思いのままだ。

—

4. シニアからのアドバイス：保守性を高めるために

最後に、チーム開発でこの擬似クラスを使う際の注意点を伝えておく。

1. タグの一貫性: `nth-last-of-type` はあくまで「タグ型」を見る。もしリスト内に異なるタグ（例えば `