The :empty pseudo-class in CSS targets elements that have no children at all, including text nodes. It is useful for styling or detecting elements that are truly empty.

Key Points About :empty

1
:empty selects elements that contain no child elements or text content.
2
Whitespace (spaces, tabs, or line breaks) inside an element counts as content, so :empty will not match.
3
It can be used to style placeholders, highlight missing content, or manage layout adjustments for empty elements.

Example: Using :empty

In this example, the second paragraph is highlighted because it is truly empty. The third paragraph is not matched by :empty due to containing a whitespace character.

Best Practices

1
Use :empty to detect elements without content dynamically.
2
Trim whitespace inside elements if you want :empty to match them.
3
Combine with pseudo-elements like ::before or ::after for custom placeholder content.
4
Test across different browsers, as handling of whitespace and empty elements may vary slightly.

Difficulty: 3/10

Topics: CSS pseudo-class, empty element detection, UI rendering behavior

Scenario Questions

0-2 years experience

1
You're building a todo list and want to show a 'No items yet' message only when the list is truly empty. You used :empty on the ul, but the message still shows even when there's a space in the list. Why?
2
How would you use :empty to hide a sidebar section when it has no child elements, and what CSS rule would you write?
3
If you apply :empty to a div that contains only a comment, will it match? Why or why not?

2-5 years experience

1
A user reports that the empty state message in our dashboard keeps flickering — sometimes it shows, sometimes it doesn't. You checked the HTML and it looks empty. What could be causing this, and how would you fix it using :empty?
2
We're using :empty to conditionally style a chat message container, but it breaks when users paste non-breaking spaces. How would you detect and handle this edge case without breaking accessibility?
3
Our design system uses :empty to hide empty tooltips, but in some browsers, the tooltip still renders a tiny gap. What's likely happening, and how would you debug this cross-browser issue?

5-8 years experience

1
You're designing a reusable component library where :empty is used to toggle placeholder content. How would you ensure consistent behavior across SSR, hydration, and dynamic content injection without introducing layout shifts?
2
In a high-performance feed, we're using :empty to avoid rendering empty cards. But we're seeing performance regressions in Firefox. What might be the root cause, and how would you optimize this without abandoning :empty?
3
A legacy component uses :empty for conditional rendering, but now we're migrating to a framework that injects comment nodes for hydration. How do you refactor this without breaking existing styles or introducing visual bugs?

8+ years experience

1
We're standardizing our design system across 12 product teams, and some are using :empty while others use JS to detect emptiness. How would you drive alignment on this pattern, and what long-term maintenance risks do you foresee?
2
Our CSS architecture relies on :empty for dynamic UI states, but we're scaling to 50+ micro-frontends. How would you ensure consistent behavior across teams without a centralized CSS build, and what monitoring would you put in place?
3
A major accessibility audit flagged our :empty-based empty states as problematic for screen readers. How would you redesign this at the architecture level to maintain visual design while meeting WCAG standards?

Follow-up Questions

❓What happens if the element has a single space inside?
❓How would you debug why :empty isn't working on an element you think is empty?
❓Can you use :empty with other pseudo-classes like :hover?