You can use the :empty pseudo-class in CSS to select and hide elements that contain no child elements or text nodes. This is useful for cleaning up unwanted empty paragraphs in dynamically generated content or CMS outputs.

Key Points About :empty

1
:empty matches elements that have no children, including text nodes or whitespace.
2
It can be used to hide empty elements like , <div>, or .
3
Whitespace or line breaks inside an element will prevent :empty from matching.

Example: Hiding Empty Tags

In this example, the second paragraph () is hidden because it’s empty. The :empty pseudo-class applies display: none; only to paragraphs that have no content or children.

Best Practices

1
Use :empty to clean up layouts affected by unwanted empty elements.
2
Ensure that no invisible characters (like spaces or line breaks) exist inside empty tags if you want them to be hidden.
3
Avoid using it for layout-critical elements; remove empty tags in markup when possible.
4
Test across browsers, as whitespace handling may differ in some editors or CMS outputs.

Difficulty: 3/10

Topics: CSS pseudo-classes, empty element detection, visual cleanup

Scenario Questions

0-2 years experience

1
How would you hide a tag that’s completely empty using only CSS?
2
What happens if a tag has a single space inside — will :empty still work? How do you fix it?

2-5 years experience

1
Our content CMS sometimes renders tags with just line breaks or non-breaking spaces — users see blank gaps. How would you debug and fix this?
2
A designer says the page looks broken because of invisible empty paragraphs. You’ve tried :empty but it’s not working. What’s your next step?

5-8 years experience

1
We have a rich-text editor that generates hundreds of empty tags on user submissions — how would you design a performant, maintainable solution to hide them without impacting layout shifts or accessibility?
2
In a large component library, empty tags are causing inconsistent spacing across pages. How would you enforce consistent styling without breaking existing content?

8+ years experience

1
We’re migrating from a legacy CMS that outputs tons of empty tags — should we fix this at the CSS layer, the template layer, or the data layer? What are the long-term maintenance tradeoffs?
2
How would you architect a cross-team standard for handling empty semantic elements across 50+ micro-frontends, balancing visual cleanliness, accessibility, and developer ergonomics?

Follow-up Questions

❓What if the paragraph has a non-breaking space instead of actual text?
❓How would you handle this if the content is dynamically injected via JavaScript?
❓Could this cause accessibility issues if screen readers encounter hidden elements?

How do you hide empty <p> tags using pseudo-classes?

Scenario Questions

Follow-up Questions