:only-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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

CSS の :only-of-type 擬似クラスは、同じ型の兄弟要素がない要素を表します。

/* <p> が親の中にある唯一の <p> 出逢った場合に選択 */
p:only-of-type {
  background-color: lime;
}

試してみましょう

a:only-of-type {
  color: fuchsia;
}

dd:only-of-type {
  background-color: bisque;
}

<p>
  To find out more about <b>QUIC</b>, check <a href="#">RFC 9000</a> and
  <a href="#">RFC 9114</a>.
</p>

<dl>
  <dt>Published</dt>
  <dd>2021</dd>
  <dd>2022</dd>
</dl>

<p>Details about <b>QPACK</b> can be found in <a href="#">RFC 9204</a>.</p>

<dl>
  <dt>Published</dt>
  <dd>2022</dd>
</dl>

メモ: 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

構文

:only-of-type

例

同じ型の兄弟がない要素をスタイル付け

HTML

html
<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>
    I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>

CSS

css
main :only-of-type {
  color: red;
}

結果

仕様書

Specification
Selectors Level 4
# only-of-type-pseudo

ブラウザーの互換性

関連情報