CSS Reference Pseudo-class

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

Examples

/* selects and hides all elements on a page */
*:empty {
    display: none;
}

/* selects and hides all empty paragraphs */
p:empty {
    display: none;
}

/* selects and hides all menu items that are empty */
nav a:empty {
    display: none;
}

/* selects empty table cells in a table and applies a background color to them */
td:empty {
    background-color: #eee;
}

Live Demo

In the following example, a linen-color background is applied to empty paragraphs. Have a look at the source code to see which elements are considered empty and which are not.

View this demo on the Codrops Playground

Browser Support

The :empty pseudo-class is supported in Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, and on Android and iOS.

Further Reading

Written by . Last updated March 2, 2020 at 11:01 am by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.