:only-of-type

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

/* 親の唯一の子の <p> である <p> 要素をすべて選択 */
p:only-of-type {
  background-color: lime;
}

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

構文

:only-of-type

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

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

結果

仕様書

仕様書 策定状況 コメント
Selectors Level 4
:only-of-type の定義
草案 選択する要素に親を必要としないようにした。
Selectors Level 3
:only-of-type の定義
勧告 初回定義。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:only-of-typeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 3.2WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連項目