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 contentMatch

Comment onlyMatch

With spaceNo match

With contentNo 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>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<section class="grid gap-4 *:min-block-16 *:border-2 *:border-solid *:border-[color-mix(in_srgb,_currentColor_18%,_transparent)] *:rounded-xl *:p-4 *:empty:border-[#f052a3] *:empty:bg-[color-mix(in_srgb,_#f052a3_16%,_transparent)] *:empty:shadow-[0_0_0_0.25rem_color-mix(in_srgb,_#f052a3_24%,_transparent)]">
  <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);
}

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

  > 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 {
      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);
    }
  }
}