:only-of-type CSS Pseudo Class

Description

The :only-of-type pseudo-class is applied to the child of the specified type only if it is unique to the parent.

Syntax

element :only-of-type { ... }

Example

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

Browser Support

Desktop

9	12	1	3.5	9.5	3.1

Tablets / Mobile

2	18	4	10.1	2	1.0

Last updated by CSSPortal on: 25th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu