CSS3 :nth-last-child()セレクター

例

同じ型の兄弟要素の中で最後から 2 番目に一致する各 p 要素の背景色を指定します：

p:nth-last-child(2) { background:#ff0000; }

:nth-last-child(n) セレクターは、要素の型に関係なく、最後の子要素から数えて N 番目の子要素である各要素にマッチします。

n数字、キーワード、または数式を使用できます。

ヒント：参照： :nth-last-of-type()セレクター。このセレクターは、親要素内の最後から n 番目の構造的子要素にマッチします。

表内の数字は、そのプロパティをサポートする最初のブラウザのバージョン番号を示しています。

セレクター
:nth-last-child()	4.0	9.0	3.5	3.2	9.6

奇数と偶数はキーワードとして使用でき、インデックスが奇数または偶数である子要素にマッチします。

ここでは、末尾から数えて奇数番目と偶数番目の p 要素に、2 つの異なる背景色を指定しています：

p:nth-last-child(odd)
{
background:#ff0000;
}
p:nth-last-child(even)
{
background:#0000ff;
}

公式（an + b）を使用します。説明：a は周期のサイズを表し、n はカウンター（0 から始まる）、b はオフセットです。

ここでは、末尾から数えたインデックスが 3 の倍数であるすべての p 要素に背景色を指定しています：

p:nth-last-child(3n+0)
{
background:#ff0000;
}

その他の拡張