【CSS】:nth-last-child(擬似クラス) - 最後からN番目の要素
CSSの擬似クラスの1つ、nth-last-childについてご紹介します。
nth-last-child
擬似クラスnth-last-child
は兄弟要素の最後からN番目の要素です。
基本構文
:nth-last-child(N) {
プロパティ名: プロパティ値;
}
N
の部分は番目です。
番目の定義形式は3種類あります。
形式 | 意味 |
---|---|
odd | 奇数番目 |
even | 偶数番目 |
An+B | A: 整数、B: 整数、n: 0から始まる自然数 |
サンプル
次のHTMLドキュメントに以下のサンプルを適用します。
<section>
<h2>セレクター</h2>
<p>セレクターは『スタイルを適用する要素』です。</p>
<h2>プロパティ名</h2>
<p>プロパティ名は『スタイルの種類』です。</p>
<h2>プロパティ値</h2>
<p>プロパティ値は『スタイルの値』です。</p>
</section>
奇数番目
次のスタイルはpかつ最後から奇数番目の要素に適用します。
p:nth-last-child(odd) {
color: red;
}
偶数番目
次のスタイルはh2かつ最後から偶数番目の要素に適用します。
h2:nth-last-child(even) {
color: red;
}
固定値
次のスタイルはh2かつ最後から4番目の要素に適用します。
h2:nth-last-child(4) {
color: red;
}
倍数
次のスタイルはpかつ最後から5の倍数番目の要素に適用します。
p:nth-last-child(5n) {
color: red;
}
An+B
次のスタイルはh2かつ最後から3n+1(1,4,7...)番目の要素に適用します。
h2:nth-last-child(3n+1) {
color: red;
}