:only-child

:only-child is a CSS pseudo-selector which matches an element if it is its parent’s only child. That is, the element is selected only if its parent has no other children of any type.

For example, li:only-child will match a list item only if it is the only item in the list. p:only-child will match a paragraph only if it is the only child inside its container. So, it will select the following paragraph:

<article>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, enim, libero voluptatum id nostrum porro laborum error nisi fugit atque a possimus ullam maxime quia tenetur obcaecati dolorum dolore placeat.
    </p>
</article>
                

But it will not match the following paragraph, since it is not the only child of its parent:

<article>
    <h1>Heading</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, iusto, eos similique eaque minus magni tempore repudiandae mollitia dignissimos obcaecati animi quis et impedit consectetur optio modi perferendis voluptate corporis!
    </p>
</article>
                

Trivia & Notes

The :only-child pseudo-class selector is the same as <a href="http://tympanus.net/codrops/css_reference/first-child">:first-child</a><a href="http://tympanus.net/codrops/css_reference/last-child">:last-child</a> and <a href="http://tympanus.net/codrops/css_reference/nth-child">:nth-child(1)</a><a href="http://tympanus.net/codrops/css_reference/nth-last-child">:nth-last-child(1)</a>, except that is has a lower specificity. <a href="http://tympanus.net/codrops/css_reference/first-child">:first-child</a><a href="http://tympanus.net/codrops/css_reference/last-child">:last-child</a> will match an element which is the first and last child of its parent (i.e the only child), and <a href="http://tympanus.net/codrops/css_reference/nth-child">:nth-child(1)</a><a href="http://tympanus.net/codrops/css_reference/nth-last-child">:nth-last-child(1)</a> will match an element if it is the first child from the top and the first child from the bottom, which also means it is the only child of its parent.

Just like other pseudo-class selectors, the :only-child selector can be chained with other selectors such as :hover and with pseudo-elements such as ::after, among others. For example, the following rule will add content to an item in a list if it is the only item in that list:

li:only-child::after {
    content: "Last item, get it before it is sold out!";
    color: tomato;
}