:empty Selector
:empty matches elements with no children — not even text nodes or whitespace. Useful for hiding empty containers or showing placeholder states.
CSS
Intermediate
4 min read
:empty Pseudo-Class
Example
/* Hide empty error messages */
.error-msg:empty {
display: none;
}
/* Show placeholder when container is empty */
.cart-items:empty::before {
content: "Your cart is empty";
color: #6c757d;
padding: 2rem;
display: block;
text-align: center;
} Pro Tip
:empty is strict — even a single space makes the element non-empty. Use JavaScript to ensure truly empty elements.