CSS Reference

:nth-last-child()

最後から n 番目の子要素にスタイルを適用する

:nth-last-child() 疑似クラスは、:nth-last-child(n) という形式で指定することで、親要素内で、指定した要素が最後から n 番目の子要素であるときにスタイルを適用します。n には任意の数値や以下のキーワード、あるいは数式を指定できます。

指定可能なキーワード

odd 最後から数えて、奇数番目の子要素である要素にスタイルを適用します。:nth-last-child(2n + 1) と同じです。
even 最後から数えて、偶数番目の子要素である要素にスタイルを適用します。:nth-last-child(2n) と同じです。

その他の記述例

:nth-child(7) 最後から数えて、7番目の要素にスタイルを適用します。
:nth-child(3n + 4) 最後から数えて、4番目、7番目、10番目...... などの要素にスタイルを適用します。
:nth-child(-n + 3) 最後3つの要素にスタイルを適用します。
:nth-child(10n - 1) 最後から数えて、9番目、19番目、29番目...... などの要素にスタイルを適用します。
:nth-child(n + 3) 最後から数えて、3番目とそれ以前のすべての要素にスタイルを適用します。
:nth-child(n + 3 of li.example) 最後から数えて、3番目とそれ以前のすべての要素の中で、li.example に該当する要素にスタイルを適用します。
:nth-child(n + 8):nth-child(-n + 15) 最後から数えて、8~15番目の要素にスタイルを適用します。

:nth-last-child()のサンプルソース

div p:nth-last-child(1) {
  padding-right: 15px;
  background: url(image/pdf-icon.png) no-repeat right center;
}

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge(EdgeHTML)
Edge(Chromium)
Firefox
Chrome
Safari
iOS Safari
Android Chrome