This article needs an editorial review. How you can help.

Summary

The :only-child CSS pseudo-class represents any element which is the only element in a context where a group of siblings would be expected. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity. In level 3 implementations, the matching element is required to have a parent. In level 4 implementations it does not.

Syntax

:only-child { style properties }

Examples

Basic example

span:only-child {
  color: red;
}
<div>
  <span>This span is the only child of its parent</span>
</div>

<div>
  <span>This span is one of the two children of its parent</span>
  <span>This span is one of the two children of its parent</span>
</div> 

Result

A list example

li li {
  list-style-type: disc;
}
li:only-child {
  color: #6699ff;
  font-style: italic;
  list-style-type: square;
}
<ol>
  <li>First
    <ul>
      <li>This is only child element
    </ul>
  </li>
  <li>Second
    <ul>
      <li>This list has two elements
      <li>This list has two elements
    </ul>
  </li>
  <li>Third
    <ul>
      <li>This list has three elements
      <li>This list has three elements
      <li>This list has three elements
    </ul>
  </li>
<ol>

Result

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':only-child' in that specification.
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
The definition of ':only-child' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 2 (Yes) 1.5 (1.8) 9 9.5 3.1
No parent required 57 ? ? ? 44 ?
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) 1.0 (1.8) 9 10 3.1
No parent required 57 57 ? ? ? 44 ?

 

Document Tags and Contributors

 Last updated by: jpmedley,