CSS:nth-last-child() 疑似クラスは、兄弟要素のグループの中での位置に基づいて選択します。

/* 兄弟要素の中で、後ろから数えて
   3つおきに要素を選択 */
:nth-last-child(4n) {
  color: lime;
}

メモ: この疑似クラスは、最初から後に向けてではなく最後から前に向けて数えるという点を除けば、本質的に :nth-child と同じです。

構文

nth-last-child 疑似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。

キーワード値

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

関数表記

<An+B>
一連の兄弟要素の中で、 n に正の整数か0が入るとき、 An+B のパターンに一致する位置の要素を表します。後ろから数えた最初の要素の番号は 1 です。 AB の値は両方とも <integer> です。

形式文法

:nth-last-child( <nth> [ of <selector># ]? )

where
<nth> = <an-plus-b> | even | odd

セレクターの例

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 番目の要素を表します。
:nth-last-child(5n)
最後から数えて 5, 10, 15 番目などの要素を表します。
:nth-last-child(3n+4)
最後から数えて 4, 7, 10, 13 番目などの要素を表します。
:nth-last-child(-n+3)
兄弟要素のグループの中で最後の3つの要素を表します。
p:nth-last-child(n) 又は p:nth-last-child(n+1)
兄弟要素のグループの中ですべての <p> 要素を表します。これは単純な p セレクターと同じです。 (n はゼロから始まるので、最後の要素が1で始まり、 n 及び n+1 が共に同じ要素を選択します。)
p:nth-last-child(1) または p:nth-last-child(0n+1)
兄弟要素のグループの中で最初の <p> 要素すべてを表します。これは :last-child セレクターと同じです。

詳細な例

HTML

<table>
  <tbody>
    <tr>
      <td>First line</td>
    </tr>
    <tr>
      <td>Second line</td>
    </tr>
    <tr>
      <td>Third line</td>
    </tr>
    <tr>
      <td>Fourth line</td>
    </tr>
    <tr>
      <td>Fifth line</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border: 1px solid blue;
}

/* 最後から3つの要素を選択 */
tr:nth-last-child(-n+3) {
  background-color: pink;
}

/* 後ろから2番目から最初までの要素を選択 */
tr:nth-last-child(n+2) {
  color: blue;
}

/* 後ろから2番目の要素のみを選択 */
tr:nth-last-child(2) {
  font-weight: 600;
}

結果

数量クエリ

数量クエリは、要素が存在する数に応じてスタイル付けします。この例では、リストの中に項目が3つ以上ある場合にリスト項目が赤に変わります。これは nth-last-child 疑似クラスと 一般兄弟結合子の機能を組み合わせることで実現できます。

HTML

<h4>4項目のリスト (スタイル付き):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

<h4>2項目のリスト (スタイルなし):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>

CSS

/* 3つ以上のリスト項目がある場合、
   すべてにスタイル付けする */
li:nth-last-child(n+3),
li:nth-last-child(n+3) ~ li {
  color: red;
}

結果

仕様書

仕様書 状態 備考
Selectors Level 4
:nth-last-child の定義
草案 親を持たない要素も一致するよう追加。
Selectors Level 3
:nth-last-child の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 4Edge 完全対応 ありFirefox 完全対応 3.5IE 完全対応 9Opera 完全対応 9Safari 完全対応 3.2WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 10Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり
of <selector> syntaxChrome 未対応 なしEdge ? Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 854148.
IE ? Opera ? Safari 完全対応 9WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 854148.
Opera Android ? Safari iOS 完全対応 9Samsung Internet Android 未対応 なし
Matches elements with no parentChrome 完全対応 57Edge ? Firefox 完全対応 52IE ? Opera 完全対応 44Safari ? WebView Android 完全対応 57Chrome Android 完全対応 57Edge Mobile ? Firefox Android 完全対応 52Opera Android 完全対応 44Safari iOS ? Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank, sosleepy
最終更新者: mfuji09,