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; } 

:only-child

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

<div>   <div>I am an only child.</div> </div>  <div>   <div>I am the 1st sibling.</div>   <div>I am the 2nd sibling.</div>   <div>I am the 3rd sibling, <div>but this is an only child.</div></div> </div> 

CSS

div:only-child {   color: red; }  div {   display: inline-block;   margin: 6px;   outline: 1px solid; } 

Result

A list example

HTML

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

CSS

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

Result

Specifications

Specification
Selectors Level 4 # only-child-pseudo

See also

:only-of-type :first-child :last-child :nth-child

Last modified: Jan 20, 2022, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語Português (do Brasil)Русский中文 (简体) Change language