Playground de :empty en CSS

Explora :empty con ejemplos visuales para detectar elementos sin nodos hijos, aplicar placeholders CSS, resaltar huecos o esconder bloques vacíos.

Sin contenido Match

Solo comentario Match

Con espacio No match

Con contenido No match

Contenido visible

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

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