CSS :only-child Pseudo-Class

CSS :only-child Pseudo-Class

The CSS :only-child pseudo-class selects an element that has no element siblings. It is useful for applying special styles when a parent contains exactly one child element, without adding extra classes or changing the HTML.

:only-child Syntax

selector:only-child {
  property: value;
}

The :only-child pseudo-class matches an element only when it is the sole element child of its parent.

Basic Example

p:only-child {
  color: #006699;
}

Selects a paragraph only when its parent has no other child elements.

Class Selector

.card:only-child {
  max-width: 500px;
}

Selects an element with the card class when it is the only element child of its parent.

Direct Child Selector

.container > .item:only-child {
  width: 100%;
}

Selects an .item element that is the only element child directly inside .container.

No Parentheses

The :only-child pseudo-class does not accept arguments and is written without parentheses.

How :only-child Works

The browser checks whether an element has any element siblings. If none exist, the element matches :only-child.

HTML Example

<div class="container">
  <p>Only paragraph</p>
</div>

CSS Example

.container p:only-child {
  background-color: #eaf6fc;
}

The paragraph matches because it is the only element child of its parent.

One Element Child

A parent must contain exactly one child element for that child to match. The parent may also contain text nodes, whitespace, or comments.

Sibling Relationships

Only elements sharing the same immediate parent are considered siblings. Elements elsewhere in the document do not affect the match.

Equivalent Conditions

p:first-child:last-child {
  background-color: #eaf6fc;
}

This selector matches the same paragraphs as p:only-child, although it has higher specificity.

Selecting a Single Child

Use :only-child to apply special styling when a container contains exactly one child element.

HTML Example

<div class="message-box">
  <p>Your changes have been saved.</p>
</div>

CSS Example

.message-box > p:only-child {
  padding: 16px;
  background-color: #eaf6fc;
  text-align: center;
}

The paragraph receives the special styling because it is the only element inside the message box.

Single Card Layout

.card-list > .card:only-child {
  width: 100%;
  max-width: 500px;
}

A single card can receive a wider layout without affecting card groups containing multiple elements.

Single Navigation Item

.nav-list > li:only-child {
  text-align: center;
}

Centers a navigation item when it is the only element child of the list.

Multiple Child Elements

The :only-child pseudo-class does not match when a parent contains two or more child elements.

HTML Example

<div class="container">
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>

CSS Example

.container p:only-child {
  color: #006699;
}

Neither paragraph matches because each has an element sibling.

Different Element Types Still Count

<div class="container">
  <h3>Heading</h3>
  <p>Paragraph</p>
</div>

The paragraph does not match :only-child because the heading is another child element of the same parent.

Hidden Siblings Still Count

<div class="container">
  <p>Visible paragraph</p>
  <p hidden>Hidden paragraph</p>
</div>

Neither paragraph matches :only-child. The hidden attribute does not remove the second paragraph from the document tree.

Text Nodes and Comments

The :only-child pseudo-class considers element siblings only. Text nodes and comments do not prevent an element from matching.

Whitespace

<div class="container">

  <p>Only element child</p>

</div>

The paragraph matches because blank lines and indentation are text nodes, not element siblings.

Comments

<div class="container">
  <!-- Message content -->
  <p>Only element child</p>
</div>

The paragraph still matches because the comment is not an element.

Text Outside the Element

<div class="container">
  Additional text
  <p>Only element child</p>
</div>

The paragraph matches because the additional text does not create an element sibling.

Important Distinction

Use :only-child to test for the absence of element siblings, not to determine whether a parent contains text or other non-element nodes.

Different Element Types

The :only-child pseudo-class checks for siblings of any element type. This differs from :only-of-type, which considers only siblings of the same type.

HTML Example

<div class="container">
  <h3>Section Heading</h3>
  <p>Section paragraph</p>
</div>

CSS Example

p:only-child {
  color: #006699;
}
p:only-of-type {
  font-weight: bold;
}

The paragraph does not match :only-child because the heading is another element child. It does match :only-of-type because it is the only paragraph among its siblings.

Element Types Are Not Ignored

A heading, image, button, or other element prevents a paragraph from matching :only-child when both share the same parent.

Nested Elements

<div class="container">
  <section>
    <p>Nested paragraph</p>
  </section>
</div>

The section matches :only-child within the container. The paragraph also matches :only-child within the section because each is the only element child of its immediate parent.

Related Pseudo-Classes

Several structural pseudo-classes select elements according to their position or relationship with siblings.

Comparison

Equivalent Selector

p:only-child {
  color: #006699;
}
p:first-child:last-child {
  background-color: #eaf6fc;
}

Both selectors match paragraphs that are the only element child of their parent, but the second selector has greater specificity.

Choosing the Right Selector

Use :only-child when the element must have no element siblings. Use :only-of-type when siblings of different element types are allowed.

Dynamic Content

The :only-child pseudo-class responds to changes in the document structure. If JavaScript adds or removes sibling elements, the matching state can change automatically.

Initial HTML

<div class="message-box">
  <p>Only message</p>
</div>

CSS

.message-box > p:only-child {
  background-color: #eaf6fc;
}

The paragraph initially matches because it has no element siblings.

Adding Another Element

const box = document.querySelector(".message-box");
const paragraph = document.createElement("p");
paragraph.textContent = "Another message";
box.appendChild(paragraph);

After the new paragraph is added, neither paragraph matches :only-child.

Removing a Sibling

If one paragraph is removed, the remaining paragraph matches :only-child again.

No Manual Class Updates

The browser recalculates selector matching when the document structure changes. JavaScript does not need to add or remove a special class for the pseudo-class to work.

:only-child Specificity

The :only-child pseudo-class contributes a specificity of 0-1-0, like other standard pseudo-classes.

Specificity Examples

Specificity Example

p {
  color: #333;
}
p:only-child {
  color: #006699;
}

When both rules match and other cascade factors are equal, the :only-child rule takes precedence because it has greater specificity.

Equivalent Conditions, Different Specificity

Although :only-child is equivalent in matching behavior to :first-child:last-child, the combined selector contributes two pseudo-class specificity values instead of one.

Practical Uses

The :only-child pseudo-class is useful for adapting layouts and styles when a container has exactly one child element.

Single Card

.card-list > .card:only-child {
  max-width: 500px;
  margin-inline: auto;
}

Centers a single card within a card list.

Single Notification

.notifications > .notification:only-child {
  border-radius: 6px;
}

Applies special styling when only one notification element exists.

Single Navigation Item

.nav-list > li:only-child {
  text-align: center;
}

Centers a navigation item when it has no element siblings.

Single Form Field

.field-group > .field:only-child {
  width: 100%;
}

Allows a single field wrapper to occupy the full available width.

Single Image

.gallery > img:only-child {
  max-width: 100%;
  display: block;
  margin-inline: auto;
}

Centers an image when it is the only element child of a gallery container.

Limitations

The :only-child pseudo-class depends on the immediate parent-child structure of the document.

All Element Types Count

Any element sibling prevents a match, even if it has a different element type or class.

Hidden Elements Still Count

Elements hidden with display: none or the hidden attribute remain element siblings and prevent a match.

Does Not Test Text Content

Text nodes and comments are ignored. An element may match :only-child even when its parent contains additional text.

Immediate Parent Only

The pseudo-class considers only elements sharing the same immediate parent. Descendants nested inside another child are not siblings.

No Parent Selection

The pseudo-class selects the child element, not its parent. To style a parent containing a single child element, combine :has() with :only-child where supported.

.card-list:has(> .card:only-child) {
  justify-content: center;
}

Dynamic Structure

Adding or removing sibling elements can change which elements match, so styles may change when the DOM is updated.

Best Practices

• Use :only-child when an element must have no element siblings.
• Combine it with a type or class selector to target the intended element.
• Use a direct child combinator when the relationship to a specific parent matters.
• Remember that hidden element siblings still prevent a match.
• Use :only-of-type when siblings of different element types should be allowed.
• Do not use :only-child to determine whether a parent contains text.
• Use the pseudo-class for single-item layout adjustments without adding extra HTML classes.
• Consider dynamic DOM changes when styling content that can be added or removed.
• Use :has() when the parent itself needs styling based on a single child.
• Keep selectors simple and test them with realistic HTML structures.

:only-child Example

This example compares a container with one child element against a container with two child elements. The single child receives a light blue background and blue border, while the elements in the second container retain their standard styling.

HTML

<div class="only-child-demo">
  <div class="demo-group">
    <div class="demo-item">Only Child</div>
  </div>
  <div class="demo-group">
    <div class="demo-item">First Child</div>
    <div class="demo-item">Second Child</div>
  </div>
</div>

CSS

.only-child-demo .demo-group {
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
}
.only-child-demo .demo-item {
  padding: 12px;
  margin-bottom: 6px;
  border: 2px solid #ccc;
  background-color: #f5f5f5;
}
.only-child-demo .demo-item:last-child {
  margin-bottom: 0;
}
.only-child-demo .demo-item:only-child {
  border-color: #006699;
  background-color: #eaf6fc;
  color: #006699;
  font-weight: bold;
}

Browser Result

Play in Editor

Note: Only Child receives the blue styling because it has no element siblings. First Child and Second Child do not match :only-child because they share the same parent.

Browser Support

Baseline: Widely available. The :only-child pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers. It is part of the established CSS structural pseudo-class selectors.

For current compatibility information, visit Can I Use? .

Specifications

The :only-child pseudo-class is defined in CSS Selectors Level 4 as a structural pseudo-class. It matches an element that has no element siblings.

Selectors Level 4 - :only-child