CSS :empty Pseudo-class

Definition and Usage

The :empty pseudo-class matches elements that have no children — no nested elements and no text nodes (spaces count as text).

Use it for placeholder boxes, empty slots, or hiding blank containers. Comments alone do not break the match. Write truly empty tags like <div></div> with nothing between them.

CSS Syntax

Often typed as div:empty, p:empty, or .box:empty.

Selector Forms

How to Use :empty

Keep the markup blank, then style the empty state.

1. Write an element with nothing between the tags (no spaces).
2. Select it with :empty or div:empty.
3. Add outline, background, or min-size so empty slots stay visible.
4. Avoid pretty-printing whitespace inside tags you need to match.

Live Preview

Toggle which box is highlighted. Only truly empty boxes (and comment-only) match :empty today.

CSS Examples

Each snippet focuses on :empty. Use Try It Yourself for a live editor.

<style>
  div:empty {
    outline: 2px solid #db2777;
    height: 2rem;
  }
</style>

<div></div>
<div>Has text</div>

<style>
  .slot:empty {
    background: #f1f5f9;
    border: 1px dashed #94a3b8;
    min-height: 2.5rem;
  }
</style>

<div class="slot"></div>
<div class="slot">Filled</div>

<style>
  p:empty {
    display: none;
  }
</style>

<p>Visible paragraph</p>
<p></p>
<p>Another visible paragraph</p>

Key Takeaways