:empty

:empty is a pseudo-class selector used to select elements in a page that are empty.

An element counts as empty if it does not have any child elements (nodes) or text content. Comments and processing instructions do not affect whether the element is empty or not. Hence:

<div><!-- COMMENT HERE  --></div>

is considered empty, and are thus selected by :empty; while

<div>
    Text and a child node.
    <p>Some content here.</p>
</div>
<div>
    Text here.
</div>

are not empty and hence don’t match the selector.

Selecting empty elements is useful for hiding these elements because they may be the cause of weird vertical and/or horizontal white space if they have padding. It’s also useful for removing empty elements in dynamic environments where empty elements are no longer needed or useful.

Trivia & Notes

Generated content such as content generated by the pseudo-elements ::before and ::after does not count as “real” content, and therefore won’t affect the emptiness of an element, even if they exit inside the element.

For example, an empty element <div><div> with some text generated using the ::after pseudo-element will get a linen background color in the following example:

div {
    padding: 15px; /* make sure it takes up some space to be able to see it rendered (just for sake of demonstration) */
}

div::after {
    content: "I'm generated inside the div."
}

div:empty {
    background-color: linen;
}

You can see a live demo using generated content in the Live Demo section below.

The following notes are courtesy of an article by Dudley Storey on the topic. (The article is not online anymore.)

Empty spaces and empty children inside an element count as character information inside that element, and so the element is not considered empty anymore if it contains one of the two. For example, the following two elements are not considered empty:

<p> </p> <!-- contains a white space -->
<p><span></span></p> <!-- contains an empty element -->

Because white spaces are considered content, element tags that are open but not closed are also considered not empty. For example:

<p>

However, if the open tag is directly followed by another tag, then it is considered empty again.

<p><p>content...</p>

If one open tag is followed by another open tag that is not directly followed by another tag, then the first tag is considered empty, and the second is not (because of the white space). For example:

<p><p>

Self-closing elements such as <hr />, <br />, and <img />, for example, are considered empty and will match the :empty selector.