:empty Back

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

<div><!-- comment --></div>

Note

• 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 exist inside the element.

div::after {
    content: "after content";
}

div:empty {
    background-color: #a10000;
    color: #fff;
}

See the Pen GoMQOL by aleen42 (@aleen42) on CodePen.

• Empty spaces, empty children and break-line character 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 three.

<!-- empty space -->
<div> </div>

<!-- empty children -->
<div></div>

<!-- break-line character -->
<div>
</div>

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

<p>

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

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

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

See the Pen yezvKV by aleen42 (@aleen42) on CodePen.