We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico1 Si199.53.1
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico2.1 ? Si4103.1 ?

Etiquetas y colaboradores del documento

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