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>
.