CSS Selectors The :only-child pseudo-class selector example


Example

The :only-child CSS pseudo-class represents any element which is the only child of its parent.

HTML:

<div>
  <p>This paragraph is the only child of the div, it will have the color blue</p>
</div>

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

CSS:

p:only-child {
  color: blue;
}

The above example selects the <p> element that is the unique child from its parent, in this case a <div>.

Live Demo on JSBin