CSS :empty Pseudo-Class: Complete Guide to Targeting Empty Elements

The CSS :empty pseudo-class is a powerful selector that targets elements containing no children or text content. This pseudo-class opens up unique styling possibilities and helps create cleaner, more responsive designs by allowing you to style empty states differently from populated elements.

What is the CSS :empty Pseudo-Class?

The :empty pseudo-class selects elements that have no children, including text nodes, element nodes, or whitespace. An element is considered empty if it contains absolutely nothing between its opening and closing tags.

Syntax and Basic Usage

The syntax for the :empty pseudo-class is straightforward:

selector:empty {
    /* CSS properties */
}

Basic Example

p:empty {
    background-color: #ffebee;
    border: 2px dashed #f44336;
    height: 30px;
}
p:empty::before {
    content: "This paragraph is empty";
    color: #f44336;
    font-style: italic;
}
p:not(:empty) {
    background-color: #e8f5e8;
    border: 2px solid #4caf50;
    padding: 10px;
}

What Counts as Empty?

Understanding what makes an element “empty” is crucial for effective use of the :empty pseudo-class:

Elements That Match :empty

Interactive Examples and Use Cases

1. Dynamic Content Placeholder

One of the most practical applications is creating placeholders for dynamically loaded content:

.content-placeholder:empty {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    height: 100px;
    border-radius: 4px;
}
.content-placeholder:empty::before {
    content: "Loading content...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2. Form Validation Indicators

The :empty pseudo-class works excellently for form validation messaging:

.error-message:empty {
    display: none;
}
.error-message:not(:empty) {
    display: block;
    background-color: #f8d7da;
    color: #721c24;
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 4px solid #dc3545;
}

3. Card Layout with Empty States

Create responsive card layouts that handle empty content gracefully:

.card-body:empty {
    background: repeating-linear-gradient(
        45deg,
        #f8f9fa,
        #f8f9fa 10px,
        #e9ecef 10px,
        #e9ecef 20px
    );
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-body:empty::before {
    content: "No content available";
    color: #6c757d;
    font-style: italic;
}

Advanced Techniques and Combinations

Combining :empty with Other Pseudo-Classes

The :empty pseudo-class becomes even more powerful when combined with other selectors:

li:empty {
    display: none; /* Hide empty list items */
}
li:not(:empty):nth-child(odd) {
    background-color: #f8f9fa; /* Alternate row colors */
}
li:not(:empty):hover {
    background-color: #e3f2fd; /* Hover effect */
}

CSS Grid and Flexbox with :empty

Handle empty grid items or flex items elegantly:

.grid-item:empty {
    border-style: dashed;
    border-color: #ccc;
    background: #fafafa;
    opacity: 0.5;
}
.grid-item:empty::before {
    content: "Empty";
    color: #999;
    font-style: italic;
}

Browser Support and Compatibility

The :empty pseudo-class enjoys excellent browser support across all modern browsers:

Common Pitfalls and Best Practices

Whitespace Sensitivity

The most common mistake is forgetting that whitespace prevents the :empty selector from matching:

<!-- This will NOT match :empty -->
<div>
</div>

<!-- This WILL match :empty -->
<div></div>

Performance Considerations

While :empty is generally performant, be mindful of its use in large DOM trees with frequently changing content, as browsers need to re-evaluate the selector when content changes.

Accessibility Considerations

When using :empty to hide content, ensure that screen readers and other assistive technologies can still understand the page structure:

/* Good: Provides context for empty states */
.notification:empty::before {
    content: "No new notifications";
    color: #666;
    font-style: italic;
}

/* Consider adding ARIA labels for better accessibility */
.notification[aria-label]:empty::before {
    content: attr(aria-label);
}

Real-World Applications

1. Navigation Menu Cleanup

/* Hide empty navigation items */
nav li:empty {
    display: none;
}

/* Style separators only when followed by content */
nav li:not(:empty) + li:empty + li:not(:empty)::before {
    content: "|";
    padding: 0 10px;
}

2. Table Cell Styling

/* Style empty table cells differently */
td:empty {
    background-color: #f8f9fa;
    position: relative;
}

td:empty::before {
    content: "—";
    color: #6c757d;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3. Search Results Handling

/* Show "no results" message when search container is empty */
.search-results:empty::before {
    content: "No results found. Try adjusting your search terms.";
    display: block;
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    font-style: italic;
}

Conclusion

The CSS :empty pseudo-class is a valuable tool for creating responsive, user-friendly interfaces that handle empty states gracefully. By understanding its behavior with whitespace, combining it with other selectors, and applying it to real-world scenarios like loading states, form validation, and dynamic content, you can significantly improve the user experience of your web applications.

Remember that :empty is whitespace-sensitive and works best when combined with other CSS features like pseudo-elements, animations, and modern layout techniques. With excellent browser support and straightforward syntax, it’s a reliable addition to any CSS developer’s toolkit.

Whether you’re building dynamic applications, creating loading states, or simply want to provide better visual feedback for empty content areas, the :empty pseudo-class offers an elegant, CSS-only solution that enhances both functionality and aesthetics.