このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
: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月.
試してみましょう
dt { font-weight: bold;}dd { margin: 3px;}dd:last-of-type { border: 2px solid orange;}<dl> <dt>Vegetables:</dt> <dd>1. Tomatoes</dd> <dd>2. Cucumbers</dd> <dd>3. Mushrooms</dd> <dt>Fruits:</dt> <dd>4. Apples</dd> <dd>5. Mangos</dd> <dd>6. Pears</dd> <dd>7. Oranges</dd></dl>構文
css
:last-of-type { /* ... */}例
最後の段落の整形
HTML
html
<h2>見出し</h2><p>段落 1</p><p>段落 2</p>CSS
css
p:last-of-type { color: red; font-style: italic;}結果
入れ子になった要素
この例は、入れ子になった要素を対象に含める方法を示します。なお、要素型セレクターが書かれていない場合は、全称セレクター (*) が暗黙に含まれます。
HTML
html
<article> <div>これは最初の `div` です。</div> <div>これは<span>内側で最後の `span`</span> です。</div> <div> これは<em>内側で最初の `em`</em>で、一方これは<em>最後の `em` </em>です。 </div> <p>これは `p` で修飾しています。</p> <div>これは最後の `div` です。</div></article>CSS
css
article :last-of-type { background-color: pink;}結果
複数セレクターの要素
この HTML の例では、さまざまな種類の要素が入れ子になっています。 CSS には、型セレクターとクラスセレクターの両方が含まれています。
HTML
html
<p>この `p` は選択されていません。</p><p>この `p` も選択されていません。</p><p> この `p` は `p` 要素型セレクターで選択された `body` などの親の最後の `p` 要素です。</p><div> <div>この `div` は選択されていません。</div> <div>この `div` も選択されていません。</div> <div> この `div` は親 `div` の `.container .item` クラスセレクターで選択される最後の `div` 要素です。 </div> <p> この `p` は親 `div` の `.container .item` クラスセレクターで選択される最後の `p` 要素です。 </p></div>CSS
css
p:last-of-type { background: skyblue;}.container .item:last-of-type { color: red; font-weight: bold;}結果
最後の<div> と最後の<p> はどちらも赤で太字になっています。これは.item:last-of-type がすべての型の最後の要素を選択するためで、その最後の要素はitem クラスも持っています。
仕様書
| Specification |
|---|
| Selectors Level 4 # last-of-type-pseudo |