:nth-last-child | スタイルシートリファレンス

:nth-last-childとは?

CSSの:nth-last-childは兄弟要素のグループ内でn番目の要素を表す方法で擬似クラスの1つです。:nth-childも同様にn番目の要素を表す方法ですが、:nth-last-child後ろから数える点で異なります。

:nth-last-child()の引数

:nth-last-childには引数を一つ渡します。その引数は大きく分けて

  • キーワード
  • 整数や数式
のいずれかを設定します。

キーワード

:nth-last-child()の引数に渡すキーワードは次の2つを渡す事が出来ます。

  • odd:最後から数えて「その要素」の奇数番目の要素 (1, 3, 5, 7, ...) を表す
  • even: 最後から数えて「その要素」の偶数番目の要素(2, 4, 6, 8, ...)を表す

整数や数式

: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で引数にキーワード、整数、数式をそれぞれ利用した指定の仕方をしています。

このように:nth-last-childで兄弟要素のグループ内で最後から数えてn番目の要素を指定することが出来ます。

:nth-last-childのブラウザ対応状況

CSSの:nth-last-childはIE6-8以外のモダンなブラウザのほとんどで対応している擬似クラスです。:nth-last-childのブラウザ毎の対応状況を確認したい方は下記よりご確認頂けます。

Can I use... Support tables for HTML5, CSS3, etc