:nth-last-of-type()

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

/* 兄弟の <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( <nth> )
where 
<nth> = <an-plus-b> | even | odd

例

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>
  <strike>This is struck through.</strike>
  <span>Here is one last span.</span>
</div>

CSS

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

結果

仕様書

仕様書 状態 備考
Selectors Level 4
:nth-last-of-type の定義		 草案 親を持たない要素も該当するよう追加。
Selectors Level 3
:nth-last-of-type の定義		 勧告 初回定義。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:nth-last-of-type()Chrome 完全対応 4Edge 完全対応 12
補足
完全対応 12
補足
補足 Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.
Firefox 完全対応 3.5IE 完全対応 9
補足
完全対応 9
補足
補足 Internet Explorer treats all unknown elements (such as custom elements) as the same element type.
Opera 完全対応 9.5Safari 完全対応 3.2WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報