How can you use :empty to detect empty elements?

Q: How can you use :empty to detect empty elements?

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. `:empty` selects elements that contain no child elements or text content. Whitespace (spaces, tabs, or line breaks) inside an element counts as content, so `:empty` will not match. It can be used to style placeholders, highlight missing content, or manage layout adjustments for empty elements. /* Highlight empty paragraphs */ p:empty { background-color: #ffe4e1; border: 1px dashed red; padding: 5px; } This paragraph has content. 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. Use `:empty` to detect elements without content dynamically. Trim whitespace inside elements if you want `:empty` to match them. Combine with pseudo-elements like `::before` or `::after` for custom placeholder content. Test across different browsers, as handling of whitespace and empty elements may vary slightly.

Difficulty: 3/10

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

Understanding the :empty Pseudo-Class in CSS

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

Scenario Questions

0-2 years experience

Follow-up Questions