CSS :empty playground

Explore :empty with visual examples for detecting elements with no child nodes, applying CSS placeholders, highlighting gaps, or hiding empty blocks.

No content Match

Comment only Match

With space No match

With content No match

Visible content

HTML

<section class="empty-demo">
  <div data-empty-label="Empty"></div>
  <div data-empty-label="Only a comment"><!-- CMS placeholder --></div>
  <div data-empty-label="Whitespace">&#32;</div>
  <div data-empty-label="With content">Content</div>
</section>

CSS

.empty-demo {
  display: grid;
  gap: 1rem;
}

.empty-demo > div {
  min-block-size: 4rem;
  border: 2px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 0.75rem;
  padding-block: 1rem;
  padding-inline: 1rem;
}

.empty-demo > div:empty {
  border-color: #f052a3;
  background-color: color-mix(in srgb, #f052a3 16%, transparent);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, #f052a3 24%, transparent);
}