【CSS】:last-child（擬似クラス） - 最後の要素

CSSの擬似クラス/last-childについて解説します。

検証環境

CSS

macOS

14.1

last-child

擬似クラス/last-childは“兄弟要素の最後の要素を表す擬似クラス”です。

基本構文

:last-child {
    プロパティ名: プロパティ値;
}

サンプル

last-childを使用した『p要素かつ最後の要素』を指定するセレクターのサンプルです。

sample.html

<style>
___ih_hl_start
p:last-child {
___ih_hl_end
    color: red;
}
</style>

<section>
    <h2>セレクター</h2>
    <p>セレクターは『スタイルを適用する要素』です。</p>
    <h2>プロパティ名</h2>
    <p>プロパティ名は『スタイルの種類』です。</p>
    <h2>プロパティ値</h2>
    <p>プロパティ値は『スタイルの値』です。</p>
</section>

プレビュー

pをh2に変更すると、『h2要素かつ最後の要素』は存在しないため、適用される要素はありません。

sample.html

<style>
___ih_diff_start
-p:last-child {
+h2:last-child {
___ih_diff_end
    color: red;
}
</style>

<section>
    <h2>セレクター</h2>
    <p>セレクターは『スタイルを適用する要素』です。</p>
    <h2>プロパティ名</h2>
    <p>プロパティ名は『スタイルの種類』です。</p>
    <h2>プロパティ値</h2>
    <p>プロパティ値は『スタイルの値』です。</p>
</section>

プレビュー