:nth-last-of-type()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:nth-last-of-type()CSS擬似クラスで、兄弟要素のグループの中で指定された型の要素を、最後から数えた位置に基づいて選択します。

/* 兄弟の <p> 要素の中で、
   後ろから数えて 3 つおきに選択 */
p:nth-last-of-type(4n) {
  color: lime;
}

試してみましょう

メモ: この擬似クラスは、最初から後に向けてではなく最後から前に向けて数えるという点を除けば、本質的に :nth-of-type と同じです。

構文

nth-last-of-type 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を 1 つ取ります。

構文の詳しい説明は :nth-last-child を参照してください。

:nth-last-of-type( <an-plus-b> | even | odd )

HTML

html
<div>
  <span>This is a span.</span>
  <span>This is another span.</span>
  <em>This is emphasized.</em>
  <span>Wow, this span gets limed!!!</span>
  <del>This is struck through.</del>
  <span>Here is one last span.</span>
</div>

CSS

css
span:nth-last-of-type(2) {
  background-color: lime;
}

結果

仕様書

Specification
Selectors Level 4
# nth-last-of-type-pseudo

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:nth-last-of-type()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報