このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
: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 2015年7月.
:nth-last-of-type() はCSS の擬似クラスで、兄弟要素のグループの中で指定された型の要素を、最後から数えた位置に基づいて選択します。
試してみましょう
dt { font-weight: bold;}dd { margin: 3px;}dd:nth-last-of-type(3n) { border: 2px solid orange;}<dl> <dt>野菜:</dt> <dd>1. トマト</dd> <dd>2. きゅうり</dd> <dd>3. キノコ</dd> <dt>果物:</dt> <dd>4. リンゴ</dd> <dd>5. マンゴー</dd> <dd>6. なし</dd> <dd>7. オレンジ</dd></dl>構文
css
:nth-last-of-type(<An+B> | even | odd) { /* ... */}引数
擬似クラス:nth-last-of-type() は、要素の照合パターンを表す単一の引数で指定します。
構文の詳しい説明は:nth-last-child を参照してください。
例
HTML
html
<div> <span>これは span です。</span> <span>これも span です。</span> <em>これは em です。</em> <span>おお、この span はライム色になりました！</span> <del>これは取り消し線です。</del> <span>これは最後の span です。</span></div>CSS
css
span:nth-last-of-type(2) { background-color: lime;}結果
仕様書
| Specification |
|---|
| Selectors Level 4 # nth-last-of-type-pseudo |