CSS :only-of-type Pseudo Class

The :only-of-type selector matches elements that are the only child of its type.

The p:only-of-type matches a paragraph only if it is the only paragraph inside its parent.

The :only-of-type and the :only-child selectors have similarities, except that the :only-child selector selects the element if its parent has no other children of any type.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Version

Selectors Level 3

Selectors Level 4

Syntax

:only-of-type {
  css declarations;
}

Example of the :only-of-type selector:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:only-of-type {
        background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:only-of-type selector example</h2>
    <div>
      <p>Lorem ipsum is simply dummy text.</p>
    </div>
    <div>
      <p>Lorem ipsum is simply dummy text.</p>
      <p>Lorem ipsum is simply dummy text.</p>
    </div>
  </body>
</html>

Try it Yourself »

Browser support


4.0+	12.0+	3.5+	3.2+	10.0+

Practice Your Knowledge

What does the ':only-of-type' pseudo-class represent in CSS?

The ':only-of-type' represents an element that has no siblings of the given type within its parent container.

The ':only-of-type' represents a target element that is the only child of its type within its parent.

The ':only-of-type' represents an element with a certain ID or class within its parent container.

The ':only-of-type' represents a styled element that is the only child of its type within its document.

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

CSS Basics

❮ Prev Next ❯

Do you find this helpful?