定義と使い方

:last-child 疑似クラスセレクターは、親要素の子要素の中で一番最後に位置する要素を選択します。

:last-child 疑似クラスセレクターは、:nth-last-child(1) と同等です。

補足説明
:nth-last-child(n)は、親要素の子要素の中で順番が後ろからn番目の要素を選択する疑似クラスです。

基本例

HTML 
<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
CSS 
li:last-child {
    background-color: yellowgreen;
}
実際に適用した結果

構文

CSS 
:last-child {
    /* ... */
}

例

:last-child 疑似クラスセレクターを理解するのに役立つ例です。

最後の段落要素のスタイリング

HTML 
<article>
    <h2>見出し要素</h2>
    <p>段落要素 1</p>
    <p>段落要素 2</p>
</article>
CSS 
article p:last-child {
    background-color: yellowgreen;
}
実際に適用した結果

入れ子になった要素のスタイリング

HTML 
<article>
    <div>この 'div' は1番目です。</div>
    <div>この <span>入れ子になった 'span' は1番目であり最後でもあります。</span>!</div>
    <div>
        この <em>入れ子になった 'em' は1番目です。</em>、しかし <em>入れ子になったこの 'em' は最後です。</em>!
    </div>
    <div>この <span>入れ子になった 'span' は1番目であり最後でもあります。</span>!</div>
    <p>この 'p' は最後の兄弟要素ではありません。</p>
    <div>この 'div' は最後の兄弟要素です。</div>
</article>
CSS 
article *:last-child {
    background-color: yellowgreen;
}
実際に適用した結果

ブラウザ互換性

最終更新日:

:last-child疑似クラスのブラウザ互換性
セレクタ
デスクトップ Chrome
Chrome
デスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
:last-child 1 12 1 3.1
親要素がない要素と一致 57 79 52 いいえ

caniuse.comで詳しい情報をご確認ください。

仕様書

:last-child疑似クラスの仕様書
仕様書
:last-child Selectors Level 4
#the-last-child-pseudo

参考資料

関連項目