The :only-child CSS pseudo-class represents an element without any siblings. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

/* Selects each <p>, but only if it is the */
/* only child of its parent */
p:only-child {
  background-color: lime;
}

Note: As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.

Syntax

:only-child

Examples

Basic example

HTML

<main>
  <div>
    <i>I am a lonely only child.</i>
  </div>

  <div>
    <i>I have siblings.</i><br>
    <b>So do I!</b><br>
    <span>I also have siblings, <span>but this is an only child.</span></span>
  </div>
</main>

CSS

main :only-child {
  color: red;
}

Result

A list example

HTML

<ol>
  <li>First
    <ul>
      <li>This list has just one element.
    </ul>
  </li>
  <li>Second
    <ul>
      <li>This list has three elements.
      <li>This list has three elements.
      <li>This list has three elements.
    </ul>
  </li>
<ol>

CSS

li li {
  list-style-type: disc;
}
li:only-child {
  color: red;
  list-style-type: square;
}

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support2 Yes1.599.53.1
Matches elements with no parent57 ?52 ?44 ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes4103.1 ?
Matches elements with no parent5757 ?5244 ? ?

See also

Document Tags and Contributors

 Last updated by: fscholz,