CSS :only-child Selector

What You’ll Learn

The :only-child pseudo-class targets an element that is the sole child of its parent — it has no sibling elements at all.

Introduction

The :only-child selector in CSS is used to target an element that is the only child of its parent. This means the element has no siblings — no other elements share the same parent container.

This pseudo-class is particularly useful when you want to apply special styles to content that stands alone inside a card, panel, or wrapper without adding extra classes or JavaScript.

Definition and Usage

Write element:only-child to match elements that are the sole direct child of their parent. The element type before the pseudo-class filters which tags can match.

📝 Syntax

The syntax for the :only-child pseudo-class is:

element:only-child {
  /* CSS properties */
}

• element is the tag you want to style (e.g. p, li, div).
• The rule applies only when that element is the only direct child of its parent.

When It Matches

Related Selectors

• :only-of-type — sole element of its tag type among siblings (other types allowed)
• :first-child / :last-child — position among all siblings
• :empty — parent has no children at all (opposite scenario)
• :not() — combine for exclusions like li:not(:only-child)

When to Use :only-child

:only-child is ideal when an element may appear alone or with siblings:

• Card layouts — Center or emphasize content when a card has just one child element.
• Dynamic lists — Style a list differently when it contains only one item.
• Form groups — Apply special spacing when a field wrapper has a single input child.
• Conditional styling — Avoid extra classes when sibling count determines appearance.
• Hover effects — Combine with :hover for interactive solo elements.

Examples Gallery

Practice :only-child with solo paragraphs, list items, card layouts, and hover combinations.

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

p {
  color: #334155;
  font-size: 1rem;
}

li:only-child {
  background: #dcfce7;
  border-left: 4px solid #16a34a;
  padding: 0.65rem 0.9rem;
  border-radius: 0.35rem;
}

.card:has(> :only-child) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 6rem;
}

.card > p:only-child {
  text-align: center;
  color: #1d4ed8;
}

p:only-child {
  padding: 0.65rem 0.9rem;
  border-radius: 0.4rem;
  transition: background 0.2s ease;
}

p:only-child:hover {
  background: #fef3c7;
}

💬 Usage Tips

• No extra classes needed — Let sibling count drive conditional styling.
• Scope with parents — .card > p:only-child limits matches to direct children.
• Combine pseudo-classes — p:only-child:hover for interactive solo elements.
• Check all sibling types — A single <span> sibling prevents a match.
• When type matters more — Use :only-of-type if other tag types may coexist.

⚠️ Common Pitfalls

• Expecting match with siblings present — Two or more children means no element matches :only-child.
• Confusing with only-of-type — A lone <p> beside a <div> is p:only-of-type but not p:only-child.
• Hidden siblings — Elements with display:none still count as siblings in the DOM.
• Specificity conflicts — A general p rule may need lower specificity or ordering adjustments.
• Wrong tag in selector — li:only-child will not match a solo <div> child.

♿ Accessibility

• Contrast on highlights — Solo-child emphasis must still meet WCAG contrast requirements.
• Do not rely on color alone — Pair visual cues with text or icons where meaning matters.
• Semantic structure — Use proper list and paragraph markup regardless of styling.
• Hover-only cues — Ensure keyboard focus states mirror hover styles where interaction matters.

💡 Best Practices