CSS :nth-last-of-type()疑似クラス：同一タグの兄弟要素を後ろからn番目に選択

定義と使い方

:nth-last-of-type(n)疑似クラスセレクターは、
特定の型（タグ名）の兄弟要素のみを基準として、並び順が後ろからn番目に位置する要素を選択します。

特定の型とは、タグ名の型です。

例えば、p:nth-last-of-type(2)は、同じ親を持つ<p>要素のみを数え、順序を最後（last）から逆に計算して、2番目の<p>要素を選択します。

基本例

HTML

<section>
    <p>'p'タグタイプのうち、後ろから3番目の要素</p>
    <div>'div'タグタイプのうち、後ろから3番目の要素</div>
    <p>'p'タグタイプのうち、後ろから2番目の要素</p>
    <p>'p'タグタイプのうち、後ろから1番目の要素</p>
    <div>'div'タグタイプのうち、後ろから2番目の要素</div>
    <div>'div'タグタイプのうち、後ろから1番目の要素</div>
</section>

CSS

/* <section>の<p>タグタイプの子要素のうち、
 * <p>タグタイプを基準として
 * 後ろから3番目に位置する要素
*/
section p:nth-last-of-type(3) {
    background-color: yellowgreen;
}

/* <section>の<div>タグタイプの子要素のうち、
 * <div>タグタイプを基準として
 * 後ろから1番目に位置する要素
*/
section div:nth-last-of-type(1) {
    background-color: orange;
}

構文

CSS

/* 正の整数：n番目 */
li:nth-last-of-type(1) /* 同じ親を持つ<li>要素のみを数え、後ろから1番目の<li>要素を選択 */
li:nth-last-of-type(7) /* 同じ親を持つ<li>要素のみを数え、後ろから7番目の<li>要素を選択 */

/* キーワード：even / odd */
li:nth-last-of-type(odd) /* 同じ親を持つ<li>要素のみを数え、後ろから奇数（1、3、5、…）番目の<li>要素を選択 */
li:nth-last-of-type(even) /* 同じ親を持つ<li>要素のみを数え、後ろから偶数（2、4、6、…）番目の<li>要素を選択 */

/* 数式：An+B */
li:nth-last-of-type(2n) /* 同じ親を持つ<li>要素のみを数え、後ろから2の倍数番目の<li>要素を選択 */
li:nth-last-of-type(3n) /* 同じ親を持つ<li>要素のみを数え、後ろから3の倍数番目の<li>要素を選択 */

li:nth-last-of-type(3n+1) /* 同じ親を持つ<li>要素のみを数え、後ろから3の倍数に1を足した番目の<li>要素を選択 */
li:nth-last-of-type(3n-1) /* 同じ親を持つ<li>要素のみを数え、後ろから3の倍数から1を引いた番目の<li>要素を選択 */

形式構文

:nth-last-of-type(n)疑似クラスのnを1つの引数として使用して指定します。

引数`n`の値

選択しようとする要素の引数です。引数nは、3つの方法で値を指定できます。

負でない整数のインデックス値
キーワード値（oddまたはeven）
An+B形式のユーザー定義パターン

負でない整数のインデックス値

特定の型（タグ名）の兄弟要素のうち、その型を基準として後ろから負でない整数でインデックスを付け、その順序に該当する要素を選択します。インデックスは1から始まります。

HTML

<section>
    <p>'p'タグタイプのうち、後ろから2番目のp</p>
    <div>'div'タグタイプのうち、後ろから1番目のdiv</div>
    <p>'p'タグタイプのうち、後ろから1番目のp</p>
</section>

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

:nth-last-of-type(n)疑似クラスのキーワード値の説明
`odd`	特定の型（タグ名）の兄弟要素のうち、その型を基準として後ろから数え、奇数番目（1、3、5、7、…）に位置する要素を選択します。
`even`	特定の型（タグ名）の兄弟要素のうち、その型を基準として後ろから数え、偶数番目（2、4、6、8、…）に位置する要素を選択します。

HTML

<section>
    <p>'p'タグタイプのうち、後ろから3番目の要素</p>
    <div>'div'タグタイプのうち、後ろから3番目の要素</div>
    <p>'p'タグタイプのうち、後ろから2番目の要素</p>
    <p>'p'タグタイプのうち、後ろから1番目の要素</p>
    <div>'div'タグタイプのうち、後ろから2番目の要素</div>
    <div>'div'タグタイプのうち、後ろから1番目の要素</div>
</section>

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

An+B形式のユーザー定義パターンを満たすインデックスを持つ要素を選択します。

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

これは、リストの後ろからAn+B番目の要素と読み取ることができます。

CSS

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

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

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

:nth-last-of-type(n)
/*
 * 0［0］、1［1］、2［2］、3［×3］のように、後ろから…番目の要素を表します。
 * 要素のインデックスは1から始まるため、0番目の要素は存在せず、後ろから1、2、3、…番目の要素を表します。
 * 結論として、nは同じ型のすべての要素を表します。
*/

次は、:nth-last-of-type(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: 10px;
}
ol li {
    aspect-ratio: 1/0.5;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
}
ol li:nth-last-of-type(5n-1) { /* 後ろから計算し、5の倍数番目の1つ前にあたる要素を選択 */
    background-color: yellowgreen;
}

CSS aspect-ratioプロパティ

この例から分かるように、:nth-last-of-type(n)疑似クラスセレクターにAn+B形式のユーザー定義パターンを活用すると、要素の選択をパターン化しやすくなります。

注意点

:nth-last-of-type(n)疑似クラスセレクターは、特定の型（タグ名）の兄弟要素のうち、その型を基準として後ろから計算し、n番目に位置する要素を選択します。

特定の型とは、タグ名の型です。

次の例で見てみましょう。

HTML

<style>
    .red-item:nth-last-of-type(2) {
        color: red;
        font-weight: bold;
    }
</style>
<ol>
    <li class="red-item">マッチする要素だと期待しますが、該当しません</li>
    <li>li</li>
    <li class="red-item">li</li>
</ol>
<!--
    * もしかして、.red-itemタイプの中から後ろから数えて2番目を選択していると思いましたか？
    * それであれば、誤った選択です。
    *
    *
    * .red-item:nth-last-of-type(2)は、次の2つの部分に分けて考えられます。
    * => .red-item：class属性の値が「red-item」である要素のタグ名は<li>です。
    * => 特定の型とは、タグ名の型を意味します。
    * => <li>要素が特定の型になります。
    * => タグ型が<li>である要素を後ろから数えて2番目の要素が、class属性の値として「red-item」を持っている必要があります。
    * => したがって、上記の要素の中にはマッチする要素は存在しません。
-->