【実務・中級編】 last-of-type擬似クラスの適用条件 – CSS実践ガイド

やあ。フロントエンドのコードベースと毎日格闘している君たちへ。

今日はCSSの「闇」というか、意外と直感的じゃない挙動でバグを生みがちな `:last-of-type` について話をしよう。

「最後の子要素を選択する」という言葉を鵜呑みにして、実務で痛い目を見た経験はないか？「なぜか期待した要素にスタイルが当たらない」「なぜか意図しない要素まで赤くなる」。そんな苛立ちを解消するために、こいつの正体をエンジニア視点で解剖していくぞ。

—

まず、この擬似クラスの仕様を正確に叩き込んでおこう。MDNには「親要素内で、そのタグ型の要素として最後に出現するもの」とある。

ここでのキモは「親要素内の全要素の中での最後」ではなく、「指定したタグ型の中で、最後」という点だ。

ブラウザのレンダリングエンジンは、DOMツリーを構築する際、各ノードに対して「型（Type）」を評価している。`:last-of-type` が宣言されると、ブラウザは親要素の中をスキャンし、「自分と同じタグ名の要素」が、それ以降に出現するかどうかをチェックする。

もし君が `p:last-of-type` と書いたなら、ブラウザは「この親の中で、これ以降に `p` タグはもう出てこないか？」という問いを常に投げかけながら描画しているんだ。これを知っているだけで、CSSのパフォーマンス意識は一段上がる。

—

中級者でもよくやるミスが、クラス名で絞り込もうとすることだ。

/ これ、実は動かないことが多いんだ /
.item:last-of-type {
margin-bottom: 0;
}

なぜか？ `:last-of-type` はあくまで「タグ名（型）」を基準にしているからだ。もし HTML 構造がこうなっていたらどうなる？

最初の項目

最後の項目

おまけのテキスト（実はこれが邪魔をする）

この場合、`.item` を持つ `p` タグは2つあるが、親要素の中で「最後に出現する `p` タグ」は確かに2つ目の `

` だ。だからこれなら動く。
しかし、もし最後に別の `

` タグが追加されたら？当然、君の期待していた `.item` からスタイルは剥がれ、新しい `

` に付与される。

教訓：クラス名そのものを「型」として指定することはできない。 `:last-of-type` はあくまで「タグ名」に対して働くという事実は、死ぬまで忘れないでくれ。

—

実務では、DOM構造が動的に変わることはザラにある。CMSから吐き出されるHTMLや、React/Vueのループ処理で生成されるコンポーネントにおいて、安全にスタイルを当てるためのコード例を置いておく。

/ 良い例: セマンティックにタグを指定する /
.news-list p:last-of-type {
/ ニュース記事内の段落の最後だけ、余白を消す /
margin-bottom: 0;
border-bottom: none;
}

/ 応用: 型が混在するリストで「最後の記事」だけ装飾する /
.article-container article:last-of-type {
border: 2px solid #333; / 最後の一件だけ枠線を強調 /
}

/ 悪い例（事故の元）: /
/
.item:last-of-type と書くと、
HTML内に

と

が混在した瞬間に
計算が狂ってレイアウト崩壊する
/

—

CSSの設計において「過度な依存」は罪だ。`:last-of-type` は、HTMLの構造を過剰に信頼しすぎないという点で、ある種のリスクがある。

もし、将来的にHTMLの構成が変わる可能性があるなら、無理に `:last-of-type` を使わず、CSSクラスで `is-last` のような修飾子を明示的に付与する方が、長期的にはメンテナンスコストが低い。

「CSSだけで綺麗に解決したい」というエンジニアの性（さが）は理解できる。だが、「変更に強いCSS」を書くことこそが、真のプロの仕事だ。

技術を魔法のように使うのではなく、ブラウザという機械がどうやってそのDOMを解釈しているのか、その裏側を想像しながらコードを書いてみてくれ。そうすれば、君が書くCSSは、誰が見ても美しいものになるはずだ。

また何か詰まったら聞きに来てくれ。コードレビュー、いつでも受けてやるよ。