CSS :only-of-type Pseudo-class

Definition and Usage

The :only-of-type pseudo-class matches an element that has no siblings of the same tag name.

Other tags beside it are fine. It equals :first-of-type:last-of-type. Compare with :only-child, which allows no element siblings at all.

CSS Syntax

Often typed as p:only-of-type, img:only-of-type, or a:only-of-type.

Selector Forms

How to Use :only-of-type

Style an element when it is the unique tag of its kind under a parent.

1. Pick the tag you care about (p, img, a, …).
2. Write tag:only-of-type (or bare :only-of-type).
3. Confirm no other sibling uses that same tag.
4. Use :only-child instead if you need zero siblings of any kind.

Live Preview

Switch between one paragraph and two. Only the lone p matches p:only-of-type — even with a footer sibling.

CSS Examples

Each snippet focuses on :only-of-type. Use Try It Yourself for a live editor.

<style>
  p:only-of-type {
    color: #1d4ed8;
    font-weight: 600;
  }
</style>

<div>
  <p>Only paragraph</p>
</div>
<div>
  <p>First</p>
  <p>Second</p>
</div>

<style>
  p:only-of-type {
    background: #dbeafe;
    padding: 0.5rem;
  }
</style>

<div>
  <p>Only p, with a footer sibling</p>
  <div>Footer</div>
</div>
<div>
  <p>First p</p>
  <p>Second p</p>
  <div>Footer</div>
</div>

<style>
  em:only-of-type {
    color: #dc2626;
  }
</style>

<div>
  <p>Hello <em>world</em></p>
</div>
<div>
  <p><em>One</em> and <em>two</em></p>
</div>

Key Takeaways