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 contenidoMatch

Solo comentarioMatch

Con espacioNo match

Con contenidoNo 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>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

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