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.
 
/* Selecciona cualquier <div> que no contenga contenido */
div:empty {
  background: lime;
}

Sintaxis

:empty

Ejemplo

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

.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

Especificación Estado Comentarios
Selectors Level 4
La definición de ':empty' en esta especificación.
Working Draft Ningún cambio.
Selectors Level 3
La definición de ':empty' en esta especificación.
Recommendation Definición Inicial.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1
Notas Nombre alternativo
Soporte completo 1
Notas Nombre alternativo
Notas See bug 1106296.
Nombre alternativo Usa un nombre no estandar : :-moz-only-whitespace
IE Soporte completo 9Opera Soporte completo 9.5Safari Soporte completo 3.1WebView Android Soporte completo 2Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4
Notas Nombre alternativo
Soporte completo 4
Notas Nombre alternativo
Notas See bug 1106296.
Nombre alternativo Usa un nombre no estandar : :-moz-only-whitespace
Opera Android Soporte completo 10Safari iOS Soporte completo 3.1Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.
Usa un nombre no estandar.
Usa un nombre no estandar.

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, teoli, Nathymig
Última actualización por: lajaso,