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> 要素を表します。これは単純な p セレクターと同じです。
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;
}

結果

極端な場合の例

n はゼロから始まるので、最後の要素が1から始まる場合、 n 及び n+1 は同じ要素を選択します。

HTML

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

CSS

tr:nth-last-child(n) {
  background-color: lightgray;
}

tr:nth-last-child(n+1){
  font-weight: 600;
}

結果

仕様書

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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応4 あり3.5993.2
of <selector> syntax なし ? なし1 ? ?9
Matches elements with no parent57 ?52 ?44 ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4103.2 あり
of <selector> syntax ? ? ? なし1 ?9 なし
Matches elements with no parent5757 ?5244 ?7.0

1. See bug 854148.

関連情報

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

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