【CSS】:nth-last-child（擬似クラス） - 最後からN番目の要素

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

検証環境

CSS

macOS

14.1

nth-last-child

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

基本構文

:nth-last-child(N) {
    プロパティ名: プロパティ値;
}

Nの部分は番目です。

番目の表現形式は次の種類があります。

形式	意味
N	任意の数値
odd	奇数番目
even	偶数番目
An+B	A: 整数、B: 整数、n: 0から始まる自然数

サンプル

次のHTMLドキュメント対するnth-last-childのサンプルを示します。

sample.html

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

任意の数値

『h2かつ最後から４番目の要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
h2:nth-last-child(4) {
___ih_hl_end
    color: red;
}

プレビュー

奇数番目

『pかつ最後から奇数番目の要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
p:nth-last-child(odd) {
___ih_hl_end
    color: red;
}

プレビュー

偶数番目

『h2かつ最後から偶数番目の要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
h2:nth-last-child(even) {
___ih_hl_end
    color: red;
}

プレビュー

倍数

『pかつ最後から５の倍数番目の要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
p:nth-last-child(5n) {
___ih_hl_end
    color: red;
}

プレビュー

An+B

『h2かつ最後から3n+1（1,4,7...）番目の要素』を指定するセレクターのサンプルです。

sample.css

___ih_hl_start
h2:nth-last-child(3n+1) {
___ih_hl_end
    color: red;
}

プレビュー