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> )
例
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 の定義 |
勧告 | 初回定義。 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:nth-last-of-type() | Chrome 完全対応 4 | Edge 完全対応 12 | Firefox 完全対応 3.5 | IE 完全対応 9 | Opera 完全対応 9.5 | Safari 完全対応 3.2 | WebView Android 完全対応 2 | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 10.1 | Safari iOS 完全対応 3.2 | Samsung Internet Android 完全対応 1.0 |
凡例
- 完全対応
- 完全対応