CSS :only-of-type Pseudo Class- Learn CSS

The :only-of-type CSS pseudo-class matches an element that is the only one of its element type among the children of its parent. "Type" here means the tag name (for example p, img, or h2), not a class or ID.

So p:only-of-type matches a <p> only if it is the only paragraph inside its parent — even if that parent also contains other elements such as headings, lists, or images.

This page explains how :only-of-type works, how it differs from :only-child, and when each one is the right tool.

When to use it

:only-of-type is useful when you want to style an element only when it stands alone within its group of same-type siblings. Common cases:

Highlight a paragraph in a card only when it is the sole paragraph there.
Add extra spacing to a list when it is the only list in a section.
Style a single image differently from images that appear in a gallery (multiple images).

If the parent gains a second element of the same type, the rule stops applying automatically — no JavaScript or extra classes needed.

`:only-of-type` vs `:only-child`

These two pseudo-classes look similar but answer different questions:

:only-child matches an element only if it has no siblings at all (it is the parent's only child of any type).
:only-of-type matches an element if it has no siblings of the same type — siblings of other types are allowed.

Consider this markup:

<div>
  <h2>Heading</h2>
  <p>Only paragraph.</p>
</div>

Here the <p> is not an :only-child (the <h2> is a sibling), but it is the :only-of-type of type p, so p:only-of-type matches it.

Version

Selectors Level 3

Selectors Level 4

Syntax

CSS :only-of-type syntax

:only-of-type {
  css declarations;
}

Example of the :only-of-type selector:

CSS :only-of-type code example

<!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 »

In the example above, the first <div> contains a single paragraph, so that paragraph gets the blue background. The second <div> contains two paragraphs, so neither matches p:only-of-type and they stay unstyled.

Mixing types in the same parent

Because :only-of-type only counts same-type siblings, a parent can have several elements of different types and each "only" type still matches:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div :only-of-type {
        color: #1c87c9;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>The only heading</h2>
      <p>The only paragraph.</p>
      <span>The only span.</span>
    </div>
  </body>
</html>

Here the <h2>, <p>, and <span> are each the only element of their type inside the <div>, so all three are styled.

Browser support

:only-of-type is supported in all modern browsers — Chrome, Firefox, Safari, Edge, and Opera. It is part of Selectors Level 3, so you can use it without a fallback in current browsers.

:only-child — matches an element with no siblings of any type.
:first-of-type — the first element of its type among siblings.
:last-of-type — the last element of its type among siblings.
:nth-of-type — selects elements of a type by position.

Practice

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.