Web/CSS/ only-of-type

From Get docs


The :only-of-type CSS pseudo-class represents an element that has no siblings of the same type.

/* Selects each <p>, but only if it is the */
/* only <p> element inside its parent */
p:only-of-type {
  background-color: lime;
}

Note: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.


Syntax

:only-of-type

Examples

Styling elements with no siblings of the same 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;
}

Result

Specifications

Specification Status Comment
Selectors Level 4The definition of ':only-of-type' in that specification. Working Draft Matching elements are not required to have a parent.
Selectors Level 3The definition of ':only-of-type' in that specification. Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
:only-of-type Chrome

Full support 1

Edge Full support 12

Notes'

Full support 12

Notes'

Notes' Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.

Firefox

Full support 3.5

IE Full support 9

Notes'

Full support 9

Notes'

Notes' Internet Explorer treats all unknown elements (such as custom elements) as the same element type.

Opera

Full support 9.5

Safari

Full support 3.2

WebView Android

Full support 2

Chrome Android

Full support 18

Firefox Android

Full support 4

Opera Android

Full support 10.1

Safari iOS

Full support 3.2

Samsung Internet Android

Full support 1.0

Legend

Full support  
Full support
See implementation notes.'
See implementation notes.


See also