:only-child CSS Pseudo Class

Description

The :only-child pseudo-class applies to a child only if it is the only parent. Same as using :first-child:last-child or :nth-child(1):nth-last-child(1).

Syntax

element:only-child { … }

Example

<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>
div:only-child {

  color: red;

}



div {

  display: inline-block;

  margin: 6px;

  outline: 1px solid;

}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
91221.59.53.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤3718410.13.1Yes

Last updated by CSSPortal on: 25th November 2019