CSSの:nth-last-childは兄弟要素のグループ内でn番目の要素を表す方法で擬似クラスの1つです。:nth-child
も同様にn番目の要素を表す方法ですが、:nth-last-child
は後ろから数える点で異なります。
:nth-last-child
には引数を一つ渡します。その引数は大きく分けて
:nth-last-child()
の引数に渡すキーワードは次の2つを渡す事が出来ます。
:nth-last-child
の引数には最後から数えて「その要素」のn番目を表す整数や数式でパターンを渡す事でも指定が可能です。
例えば下記のように固定の表示順の番号の指定や、偶数・奇数、計算式を使ったn番目の指定方法が行えます。
/* 最後から2番目のpタグ */
p.nth-last-child(2) {
}
/* 最後から数えて偶数のpタグ */
p:nth-last-child(2n) {
}
/* 最後から数えて奇数のpタグ */
p:nth-last-child(2n+1) {
}
/* 最後から数えて3n+2つまり(5 8, 11, ...番目)*/
p:nth-last-child(3n+2) {
}
上記のサンプルコードでは:nth-last-child
で引数にキーワード、整数、数式をそれぞれ利用した指定の仕方をしています。
このように:nth-last-child
で兄弟要素のグループ内で最後から数えてn番目の要素を指定することが出来ます。
CSSの:nth-last-child
はIE6-8以外のモダンなブラウザのほとんどで対応している擬似クラスです。:nth-last-child
のブラウザ毎の対応状況を確認したい方は下記よりご確認頂けます。