HTML & CSS reference

:empty

Matches an element with no children and no text.

Syntax

selector:empty { … }

Examples

An empty badge is hidden:

<style>
  .badge { display: inline-block; padding: 2px 8px; background: crimson; color: white; border-radius: 10px; }
  .badge:empty { display: none; }
</style>
 
<p>Inbox <span class="badge">3</span></p>
<p>Spam <span class="badge"></span></p>

Notes

Even a space or a line break inside the element makes it non-empty. Comments do not count.

See also

:not() — Matches elements that do not match any of the selectors in the brackets.
display — Decides how an element behaves in the flow and how it lays out its content.

In the tutorial

Pseudo-classes — Styles for element states and positions — hover, focus, links, first-child, nth-child, not and form fields.