:last-childセレクターがHTML5で期待どおりに機能しない理由と対処法

:last-childセレクターは、親要素の中で最後の子要素を選択するためのCSS擬似クラスです。ただし、このセレクターには重要な制約があります。「特定のクラスを持つ最後の要素」だけをピンポイントで選択することはできません。

基本的な使い方

例えば、リストの最後のli要素に背景色を設定したい場合は、次のように記述します。

li:last-child {
    background-color: blue;
}

:last-childが期待どおりに動作しないケース

:last-childは「親要素の最後の子要素であること」を条件とします。そのため、対象の要素が親要素内の一番最後に配置されていない場合、スタイルは適用されません。

例として、<a>要素を見てみましょう。a:last-childというセレクターは、次のようなHTMLでは正しく機能します。

<div>
    <a></a>
    <a>この要素が選択される</a>
</div>

この場合、2番目の<a>は<div>の最後の子要素なので、問題なく選択されます。

しかし、この<a>の後ろに別の要素（例えば<span>やテキストノード以外の要素）が追加されると、その<a>はもはや「最後の子」ではなくなるため、スタイルが適用されなくなります。これが「期待どおりに機能しない」と感じる主な原因です。

対処法：last-of-typeを使う

他の種類の要素が後ろに続く可能性がある場合は、:last-of-typeを使用するのが効果的です。:last-of-typeは、同じタグ名の要素の中で最後のものを選択するため、後ろに異なる種類の要素があっても影響を受けません。

a:last-of-type {
    background-color: blue;
}

特定のクラスを持つ最後の要素を選びたい場合

CSSの標準仕様では、「特定のクラスを持つ最後の要素」を直接選択するセレクターは存在しません。このような要件がある場合は、以下の方法が現実的です。

• HTML構造を見直す：対象となる要素を親の最後に配置する
• JavaScriptで対応する：該当クラスの要素を取得し、最後の要素に専用クラスを付与する

:last-childの挙動を正しく理解しておけば、意図しないスタイル適用のトラブルを防ぎ、より堅牢なCSS設計につながります。