:nth-last-child()
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
:nth-last-child() は CSS の擬似クラスで、兄弟要素のグループの中での位置に基づいて選択します。
/* 兄弟要素の中で、後ろから数えて
3 つおきに要素を選択 */
:nth-last-child(4n) {
color: lime;
}
試してみましょう
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>Eight deadliest wildfires:</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>
メモ:
この擬似クラスは、最初から後に向けてではなく最後から前に向けて数えるという点を除けば、本質的に :nth-child と同じです。
構文
nth-last-child 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を 1 つ取ります。
:nth-last-child( <nth> [ of <complex-selector-list> ]? )
キーワード値
関数記法
例
セレクターの例
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(3) ~ li {
color: red;
}
結果
仕様書
| Specification |
|---|
| Selectors Level 4 # nth-last-child-pseudo |