:nth-last-child()
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
です。A
とB
の値は両方とも<integer>
です。
形式文法
:nth-last-child( <nth> [ of <complex-selector-list> ]? )ここで
<nth> = <an-plus-b> | even | odd
<complex-selector-list> = <complex-selector>#ここで
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
ここで
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]ここで
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'ここで
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'ここで
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s
例
セレクターの例
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 の定義 |
勧告 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。