CSS :nth-last-child()疑似クラス：後ろからn番目の子要素を選択

定義と使い方

:nth-last-child(n)は、親要素の子要素の中から、順序を後ろから数えてn番目に該当する要素を選択する疑似クラスです。
例えば、:nth-last-child(2)は、子要素を最後（last）から順に数えたとき、2番目に位置する要素を選択します。

基本例

CSS

ol > :nth-last-child(2) { /* <ol>の子要素の中から、順序を後ろから数えて2番目に位置する要素を選択 */
    background-color: yellow;
}

構文

CSS

/* 正の整数：n番目 */
:nth-last-child(1) /* 任意の子要素の中から、後ろから数えて1番目の要素を選択 */
li:nth-last-child(1) /* 任意の子要素の中から、後ろから数えて1番目に該当する<li>要素を選択 */

:nth-last-child(7) /* 任意の子要素の中から、後ろから数えて7番目の要素を選択 */
li:nth-last-child(7) /* 任意の子要素の中から、後ろから数えて7番目に該当する<li>要素を選択 */

/* キーワード：even / odd */
:nth-last-child(odd) /* 任意の子要素の中から、後ろから数えて奇数（1、3、5、…）番目の要素を選択 */
li:nth-last-child(even) /* 任意の子要素の中から、後ろから数えて偶数（2、4、6、…）番目に該当する<li>要素を選択 */

/* 数式：An+B */
:nth-last-child(2n) /* 任意の子要素の中から、後ろから数えて2の倍数番目の要素を選択 */
li:nth-last-child(2n) /* 任意の子要素の中から、後ろから数えて2の倍数番目に該当する<li>要素を選択 */

:nth-last-child(3n) /* 任意の子要素の中から、後ろから数えて3の倍数番目の要素を選択 */
li:nth-last-child(2n) /* 任意の子要素の中から、後ろから数えて3の倍数番目に該当する<li>要素を選択 */

:nth-last-child(3n+1) /* 任意の子要素の中から、後ろから数えて3の倍数に1を加えた番目の要素を選択 */
:nth-last-child(3n-1) /* 任意の子要素の中から、後ろから数えて3の倍数から1を引いた番目の要素を選択 */

形式構文

:nth-last-child(n)疑似クラスでは、nを1つの引数として指定します。

引数`n`の値

親要素の子要素の中から選択したい要素を指定するための引数です。引数nは、次の3つの方法で値を指定できます。

非負の整数のインデックス値
キーワード値［odd（奇数番目）またはeven（偶数番目）］
An+B形式のユーザー定義パターン

非負の整数のインデックス値

親要素の子要素の中から、非負の整数を用いて後ろからインデックスを付与し、その順序に該当する要素を選択します。インデックスは1から始まります。

キーワード値（`odd`または`even`）

:nth-last-child(n)疑似クラスのキーワード値の説明
`odd`	親要素の子要素の中から、後ろから数えて奇数番目（1、3、5、7、…）に位置する要素を選択します。
`even`	親要素の子要素の中から、後ろから数えて偶数番目（2、4、6、8、…）に位置する要素を選択します。

`An+B`形式のユーザー定義パターン

An+B形式のユーザー定義パターンを満たすインデックスを持つ要素を選択します。このパターンは後ろから計算されます。

Aは整数インデックスの増減ステップを表します。
Bは整数のオフセットで、省略可能です。
nは0から始まるすべての正の整数を表します。

これは、リストの後ろからAn+B番目の要素として解釈できます。

CSS

:nth-last-child(5n)
/*
 * 0［=5×0］、5［=5×1］、10［=5×2］、15［=5×3］など、後ろから数えた…番目の要素を表します。
 * 要素のインデックスは1から始まるため、0番目の要素は存在せず、結果として後ろから5、10、15、…番目の要素を表します。
 * 結論として、5nは後ろから数えて5の倍数番目の要素を選択します。
*/

:nth-last-child(5n-1)
/*
 * -1［=5×0-1］、4［=5×1-1］、9［=5×2-1］、14［=5×3-1］など、後ろから数えた…番目の要素を表します。
 * 要素のインデックスは1から始まるため、-1番目の要素は存在せず、後ろから4、9、14、…番目の要素を表します。
 * 結論として、5n-1は後ろから数えて5の倍数番目の1つ前の要素を選択します。
*/

:nth-last-child(5n+1)
/*
 * 1［=5×0+1］、6［=5×1+1］、11［=5×2+1］、16［=5×3+1］など、後ろから数えた…番目の要素を表します。
 * 後ろから1、6、11、16、…番目の要素を表します。
 * 結論として、5n+1は後ろから数えて5の倍数番目の1つ後ろの要素を選択します。
*/

:nth-last-child(n)
/*
 * 0［=0］、1［=1］、2［=2］、3［=3］など、後ろから数えた…番目の要素を表します。
 * 要素のインデックスは1から始まるため、0番目の要素は存在せず、後ろから1、2、3、…番目の要素を表します。
 * 結論として、nはすべての要素を表します。
*/

次は、:nth-last-child(An+B)セレクターを活用し、要素の選択をパターン化してスタイルを適用した例です。

HTML

<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>

CSS

ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 7px;
}
ol li {
    aspect-ratio: 1/0.5;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
ol li:nth-last-child(5n-1) { /* 後ろから計算し、5の倍数番目の1つ前に該当する要素を選択 */
    background-color: yellowgreen;
}