Casi siempre damos estilo a elementos que tienen contenido. ¿Y cuándo un elemento no tiene ni hijos ni texto? Fácil: para eso está el selector :empty.
<p> </p>
<!-- Pas à cause de l'espace blanc -->
<p></p>
<!-- Vide car pas d'espace blanc -->
p::before {
font-family: 'FontAwesome';
content: 'f240';
}
p:empty::before {
content: 'f244';
}
p {
color: silver;
}
p:empty {
color: red;
}
¿Qué se considera vacío?
La primera vez que me encontré con esto, no tenía nada claro qué considera esta pseudoclase realmente vacío. Quedémonos con la definición de MDN:
La pseudoclase CSS :empty representa cualquier elemento que no tiene hijos. Los hijos pueden ser nodos de elemento o texto (incluidos los espacios en blanco). Los comentarios, las instrucciones de procesamiento y el contenido generado por CSS no influyen en que un elemento se considere vacío.
:empty
Mientras no haya ni un espacio, el elemento está vacío.
<p></p>
Un comentario entre las dos etiquetas también cuenta como elemento vacío. Siempre que no haya ningún espacio.
<p><!-- comment --></p>
No :empty
Los espacios en blanco cuentan como contenido. Incluso un salto de línea es un espacio en blanco, así que el elemento ya no está vacío. Insisto en esto porque yo mismo caí en la trampa.
<p> </p>
<p>
<!-- comment -->
</p>
Tener un elemento hijo también cuenta como no vacío
<p><span></span></p>
Los espacios en blanco en la futura especificación
La buena noticia es que en Selectors Level 4 los espacios en blanco pasarán a considerarse vacío. Se comportará igual que :-moz-only-whitespace. Dicho de otro modo, esto se considerará vacío:
<p> </p>
PERO no lo uses todavía. Ahora mismo ningún navegador lo soporta.
Ejemplos de uso de :empty
Veamos algunos casos concretos en los que :empty resulta útil.
Usar :empty en el mensaje de error de un formulario
Este es el caso que me hizo descubrir :empty. Quería poner un icono delante del mensaje de error, pero el icono aparecía incluso cuando no había ningún mensaje. Con :empty el problema desaparece: el icono solo se añade cuando hay mensaje de error.
CSS
.error:before {
color: red;
content: '274c '; /* ❌ icono */
}
HTML
<!-- Pas de message d'erreur -->
<div class="error"></div>
<!-- Oui, un message d'erreur -->
<div class="error">Email manquant</div>
Resultado
Sin :empty
❌❌ Falta el email
Con :empty
❌ Falta el email
Usar :empty en las alertas
Otro ejemplo con :empty, esta vez para ocultar el estado vacío.
.alert {
background: pink;
padding: 10px;
}
.alert:empty {
display: none;
}
HTML
<div class="alert"></div>
<div class="alert">Message d'alerte</div>
Resultado
Sin :empty
Mensaje de alerta
Con :empty
Mensaje de alerta
Compatibilidad con los navegadores
El soporte es excelente. Funciona en todos los navegadores hasta Internet Explorer 9
