:nth-last-child()

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

完全な互換性情報を見る
もっと詳しく

:nth-last-child() は CSS の擬似クラスで、兄弟要素のグループにおける末尾からの位置に基づいて選択します。

試してみましょう

p {
  font-weight: bold;
}

li:nth-last-child(-n + 3) {
  border: 2px solid orange;
  margin-top: 1px;
}

li:nth-last-child(even) {
  background-color: lightyellow;
}

<p>史上最悪の 8 つの山火事:</p>
<ol reversed>
  <li>Matheson Fire</li>
  <li>Miramichi Fire</li>
  <li>1997 Indonesian fires</li>
  <li>Thumb Fire</li>
  <li>Great Hinckley Fire</li>
  <li>Cloquet Fire</li>
  <li>Kursha-2 Fire</li>
  <li>Peshtigo Fire</li>
</ol>

構文

css

:nth-last-child(<nth> [of <complex-selector-list>]?) {
  /* ... */
}

引数

:nth-last-child() 擬似クラスは、単一の引数を取り、要素と照合する末尾から数えたパターンを指定します。

キーワード値

odd: 一連の兄弟要素の中で、最後から奇数番目の要素（1, 3, 5, など）を表します。
even: 一連の兄弟要素の中で、最後から偶数番目の要素（2, 4, 6, など）を表します。

関数記法

<An+B>

一連の兄弟要素の中で、位置がパターン An+B と一致する要素を表します。ここで、n は正の整数または 0 の値であり、

A は整数で増分の大きさ、
B は整数でオフセット、
n は 0 から始まる、すべて非負の整数です。

これは、リストの An+B 番目の要素とみなすことができます。末尾から数えた最初の要素の番号は 1 です。 A と B の値は両方とも <integer> の値です。

`of <selector>` 構文

セレクター引数を渡すことで、そのセレクターに一致する末尾から n 番目の要素を選択することができます。例えば、次のセレクターは class="important" を持つ最後の 3 つのリストアイテムに一致します。

css

:nth-last-child(-n + 3 of li.important) {
}

これは、セレクターを関数の外に移動させた場合とは異なります。例えば、

css

li.important:nth-last-child(-n + 3) {
}

このセレクターは、リストアイテムが最後の 3 つの子のいずれかに含まれている場合にも、そのスタイルを適用します。

例

セレクターの例

tr:nth-last-child(odd) または tr:nth-last-child(2n+1): HTML テーブルの最後から数えた奇数行 (1, 3, 5, など) を表します。
tr:nth-last-child(even) または tr:nth-last-child(2n): HTML テーブルの最後から数えた偶数行 (2, 4, 6, など) を表します。
:nth-last-child(7): 最後から数えて 7 番目の要素を表します。