:empty

La pseudo-clase :empty de CSS representa cualquier elemento que no tenga hijos. Los hijos pueden ser nodos de elemento o texto (incluido el espacio en blanco). Los comentarios o las instrucciones de procesamiento no afectan si un elemento se considera vacío.

Nota: En Selectors Level 4 la pseudo-clase :empty fue modificada para actuar como :-moz-only-whitespace, pero ningún navegador actualmente suporta aún esto.

css

/* Selecciona cualquier <div> que no contenga contenido */
div:empty {
  background: lime;
}

Sintaxis

Error: could not find syntax for this item

Ejemplo

HTML

html

<div class="box"><!-- Voy a ser de color lima. --></div>
<div class="box">Voy a ser de color rosa.</div>
<div class="box">
  <!-- Seré de color rosa debido a los espacios en blanco alrededor de este comentario. -->
</div>

CSS

body {
  display: flex;
  justify-content: space-around;
}

css

.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}

Resultado

Problemas de accesibilidad

La tecnología de asistencia, como los lectores de pantalla, no puede analizar el contenido interactivo que está vacío. Todo el contenido interactivo debe tener un nombre accesible, que se crea proporcionando un valor de texto para el elemento principal del control interactivo (anclajes, botones, etc.). Los nombres accesibles exponen el control interactivo al árbol de accesibilidad, una API que comunica información útil para las tecnologías de asistencia.

El texto que proporciona el nombre accesible del control interactivo se puede ocultar mediante una combinación de propiedades que lo eliminan visualmente de la pantalla, pero que la tecnología de asistencia lo puede analizar. Esto se usa comúnmente para botones que dependen solo de un ícono para transmitir el propósito.

Especificaciones

Specification
Selectors Level 4 # the-empty-pseudo

Compatibilidad con navegadores

BCD tables only load in the browser