: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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:nth-last-of-type() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.