:nth-last-child() 疑似クラス CSS プロパティとは
トピック：最後の子から数えて、その親のタイプにかかわらず n 番目の子であるすべての要素にマッチ(選択)する、事ができる n には、数値、キーワード、または式を指定できる
疑似クラス セレクター :nth-last-child()
実例 コード 1
サンプル コードを試すp:nth-last-child(2) {
background: red;
}
構文
:nth-last-child(number) { css : properties ; }
疑似クラス名 {スタイル要素のプロパティ : プロパティ値; }
nth-last-child 擬似クラスは、要素を選択する最後から数えるパターンを表す1つの引数をとります。
キーワード値
実例 コード 2
サンプル コードを試すp:nth-last-child(odd) {
background: red;
}
p:nth-last-child(even) {
background: blue;
}
情報：odd一連の兄弟要素の中で最後から数えて奇数番目の要素(1, 3, 5) などを指定する ことができる。even一連の兄弟要素の中で最後から数えて偶数番目の要素(2, 4, 6) などを指定する ことができる。
関数表記
実例 コード 3
サンプル コードを試すp:nth-last-child(3n+0) {
background: red;
}
情報：<An+B>一連の兄弟要素のうちnに正の整数または0を入力すると、An+B のパターンと一致する位置の要素が表示されます。 最後から数えた最初の要素の数は番号は1です AとB の両方の値 <integer>
実例 コード 4
CSSコード：例
table {
border:1px solid blue;
}tr:nth-last-child(-n+3){
background-color: pink;
}tr:nth-last-child(n+2){
color: blue;
}tr:nth-last-child(2){
font-weight:600;
}
情報：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 セレクターと同じ 。
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| :nth-last-child() | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯4 | フルサポート◯あり | フルサポート◯3.5 | フルサポート◯9 | フルサポート◯9 | フルサポート◯3.2 |
|---|
<selector> 構文 | サポートなし✖ | 不明 | サポートなし✖ | 不明 | 不明 | フルサポート◯9 |
|---|
| 親なしの要素と一致 | フルサポート◯57 | 不明 | フルサポート◯52 | 不明 | フルサポート◯44 | 不明 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| :nth-last-child() | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり | フルサポート◯4 | フルサポート◯10 | フルサポート◯3.2 | フルサポート◯あり |
|---|
<selector> 構文 | 不明 | 不明 | 不明 | サポートなし✖ | 不明 | フルサポート◯9 | サポートなし✖ |
|---|
| 親なしの要素と一致 | フルサポート◯57 | フルサポート◯57 | 不明 | フルサポート◯52 | フルサポート◯44 | 不明 | フルサポート◯7.0 |
|---|
：:nth-last-child() 疑似クラス 関連記事 
CSS :nth-last-child() 疑似クラス | CSS プロパティ 値| 意味 使い方 実例 – WebRef