CSS :only-of-type 擬似クラス
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
試してみましょう
a:only-of-type {
color: fuchsia;
}
dd:only-of-type {
background-color: bisque;
}
<p>
<b>QUIC</b> の詳細を探すには、<a href="#">RFC 9000</a> および <a href="#">RFC 9114</a> を調べてください。
</p>
<dl>
<dt>公開日</dt>
<dd>2021</dd>
<dd>2022</dd>
</dl>
<p><b>QPACK</b> に関する詳細は、<a href="#">RFC 9204</a> で探すことができます。</p>
<dl>
<dt>公開日</dt>
<dd>2022</dd>
</dl>
構文
css
:only-of-type {
/* ... */
}
例
同じ型の兄弟がない要素をスタイル付け
HTML
html
<main>
<div>これは 1 つ目の `div` です。</div>
<p>これは兄弟の中で唯一の `p` です。</p>
<div>これは 2 つ目の `div` です。</div>
<div>
これは 3 つ目の `div` です。
<i>これは唯一の `i` 子要素です。</i>
<em>これは 1 つ目の `em` です。</em>
<em>これは 2 つ目の `em` です。</em>
</div>
</main>
CSS
css
main :only-of-type {
color: red;
}
結果
仕様書
| 仕様書 |
|---|
| Selectors Level 4 # only-of-type-pseudo |