CSS :only-of-type Selector

What You’ll Learn

The :only-of-type pseudo-class targets an element that is the only one of its tag type among siblings — other element types may still be present.

Introduction

The :only-of-type selector in CSS targets an element that is the only one of its type within its parent. This pseudo-class is useful when you need to style a single paragraph, heading, or list item of a given tag without requiring it to be the only child overall.

It enhances precision in mixed-content layouts where headings, paragraphs, and divs appear together as siblings.

Definition and Usage

Write element:only-of-type to match elements that are the sole sibling of their tag type inside a parent.

📝 Syntax

The syntax for the :only-of-type pseudo-class is:

element:only-of-type {
  /* CSS properties */
}

• element is the tag you want to style (e.g. p, h2, li).
• The rule applies only when no other sibling of that same tag type exists in the parent.

When It Matches

Related Selectors

• :only-child — sole child with no siblings of any type
• :first-of-type / :last-of-type — positional among same-type siblings
• :nth-of-type() — pattern-based selection by type position
• :not() — combine for exclusions like p:not(:only-of-type)

When to Use :only-of-type

:only-of-type is ideal when tag type uniqueness matters more than overall sibling count:

• Mixed-content articles — Style a lone <h2> even when paragraphs surround it.
• Dynamic layouts — Apply special styling when only one paragraph renders in a section.
• Navigation lists — Highlight a menu when it contains a single <li> of its type.
• Footer blocks — Emphasize a sole <p> beside a <div> widget.
• When only-child is too strict — Other tag types may legitimately sit as siblings.

Examples Gallery

Practice :only-of-type with solo paragraphs, mixed siblings, article headings, and navigation lists.

p:only-of-type {
  color: #1d4ed8;
  font-weight: 700;
}

<style>
  p:only-of-type {
    background: #dcfce7;
    border-left: 4px solid #16a34a;
    padding: 0.5rem 0.65rem;
  }
</style>

<article>
  <p>Lone paragraph in this section.</p>
  <div class="footer">Share link</div>
</article>

h2:only-of-type {
  color: #b91c1c;
  border-bottom: 2px solid #fecaca;
  padding-bottom: 0.35rem;
}

li:only-of-type {
  background: #fef3c7;
  border-left: 4px solid #d97706;
  padding: 0.65rem 0.9rem;
  border-radius: 0.35rem;
}

💬 Usage Tips

• Prefer over only-child in mixed layouts — When other tag types may sit as siblings.
• Scope with parents — article > p:only-of-type limits to direct paragraph children.
• Dynamic content — Great for CMS output where section structure varies.
• Check same-type siblings — A second paragraph blocks the match, not a div.
• Combine with :hover — p:only-of-type:hover for interactive solo elements.

⚠️ Common Pitfalls

• Multiple elements of same type — Two <p> siblings means neither matches p:only-of-type.
• Confusing with only-child — A lone <p> beside a <div> is not :only-child.
• Wrong tag in selector — li:only-of-type will not match a solo <div>.
• Expecting match across parents — The check is among siblings inside one parent only.
• Specificity conflicts — General element rules may override unless ordered correctly.

♿ Accessibility

• Contrast on highlights — Solo-type emphasis must still meet WCAG contrast requirements.
• Do not rely on color alone — Pair visual cues with clear text or structure.
• Semantic markup — Use proper heading, paragraph, and list tags for screen readers.
• Reading order unchanged — Positional styling does not affect assistive technology order.

💡 Best Practices