Essential Books

The :only-child pseudo-class selector example

suggest change

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

Found a mistake? Have a question or improvement idea? Let me know.

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:

Selectors:
* Selectors
* Basic selectors
* Attribute Selectors
* Combinators
* Pseudo-classes
* Child Pseudo Class
* Class Name Selectors
* Select element using its ID without the high specificity of the ID selector
* Global boolean with checkbox checked and general sibling combinator
* CSS3 :in-range selector example
* A. The :not pseudo-class example B. :focus-within CSS pseudo-class
* The :last-of-type selector
* ID selectors
* How to style a Range input
* The :only-child pseudo-class selector example
Table Of Contents