このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
: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 2015年7月.
* Some parts of this feature may have varying levels of support.
: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>構文
:nth-last-child(<nth> [of <complex-selector-list>]?) { /* ... */}引数
:nth-last-child() 擬似クラスは、単一の引数を取り、要素と照合する末尾から数えたパターンを指定します。
キーワード値
関数記法
<An+B>一連の兄弟要素の中で、位置がパターン
An+Bと一致する要素を表します。ここで、nは正の整数または 0 の値であり、Aは整数で増分の大きさ、Bは整数でオフセット、nは 0 から始まる、すべて非負の整数です。
これは、リストの
An+B番目の要素とみなすことができます。末尾から数えた最初の要素の番号は1です。AとBの値は両方とも<integer>の値です。
of <selector> 構文
セレクター引数を渡すことで、そのセレクターに一致する末尾から n 番目の要素を選択することができます。例えば、次のセレクターはclass="important" を持つ最後の 3 つのリストアイテムに一致します。
:nth-last-child(-n + 3 of li.important) {}これは、セレクターを関数の外に移動させた場合とは異なります。例えば、
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 番目の要素を表します。
: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>1 行目</td> </tr> <tr> <td>2 行目</td> </tr> <tr> <td>3 行目</td> </tr> <tr> <td>4 行目</td> </tr> <tr> <td>5 行目</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;}結果
of <selector> 構文の例
この例では、名前の順序なしリストがあります。一部のアイテムにはnoted クラスが適用されており、下部に太い境界線で強調表示されています。
HTML
<ul> <li>Diego</li> <li>Shilpa</li> <li>Caterina</li> <li>Jayla</li> <li>Tyrone</li> <li>Ricardo</li> <li>Gila</li> <li>Sienna</li> <li>Titilayo</li> <li>Lexi</li> <li>Aylin</li> <li>Leo</li> <li>Leyla</li> <li>Bruce</li> <li>Aisha</li> <li>Veronica</li> <li>Kyouko</li> <li>Shireen</li> <li>Tanya</li> <li>Marlene</li></ul>CSS
* { font-family: sans-serif;}ul { display: flex; flex-wrap: wrap; list-style: none; font-size: 1.2rem; padding-left: 0;}li { margin: 0.125rem; padding: 0.25rem; border: 1px solid tomato;}.noted { border-bottom: 5px solid tomato;}以下の CSS では、class="noted" でマークされた奇数のリストアイテムを対象としています。
li:nth-last-child(odd of .noted) { background-color: tomato; border-bottom-color: seagreen;}結果
class="noted" に対応するアイテムには、下部に太い境界線があり、アイテム 1、7、14、20 は、class="noted" を持つ奇数リストアイテムであるため、背景が塗りつぶされています。
仕様書
| Specification |
|---|
| Selectors Level 4 # nth-last-child-pseudo |