Si trabajas habitualmente con CSS, aprender a utilizar la pseudoclase :empty puede ayudarte a ocultar elementos sin contenido, eliminar espacios innecesarios y crear interfaces mucho más limpias sin recurrir a JavaScript.
La pseudoclase :empty de CSS permite seleccionar automáticamente aquellos elementos HTML que no contienen nodos hijos, convirtiéndose en una herramienta particularmente útil cuando el contenido de una página se genera dinámicamente.
En este tutorial descubrirás cómo seleccionar elementos vacíos con :empty, qué elementos considera realmente vacíos el navegador, cuáles son sus limitaciones y cómo puedes aprovechar esta pseudoclase en proyectos reales.
Qué es :empty en CSS 🧩
:empty es una pseudoclase estructural de CSS que selecciona cualquier elemento que no tenga elementos secundarios ni determinados nodos de texto en su interior.
Puedes consultar su definición técnica en la documentación de :empty de MDN, donde encontrarás también información sobre su sintaxis y compatibilidad.
Su estructura básica es extremadamente sencilla:
selector:empty {
propiedad: valor;
}
Por ejemplo, puedes ocultar todos los párrafos completamente vacíos utilizando únicamente unas pocas líneas de CSS:
p:empty {
display: none;
}
Con esta regla, cualquier etiqueta <p> que esté realmente vacía será eliminada visualmente del diseño mediante display: none.
Cómo seleccionar un elemento vacío con :empty 🎯
Seleccionar elementos vacíos con CSS únicamente requiere añadir :empty después del selector que quieras comprobar.
Si tienes este código HTML:
<div class="mensaje"></div>
<div class="mensaje">
Tienes un nuevo mensaje.
</div>
Puedes seleccionar exclusivamente el primer elemento utilizando:
.mensaje:empty {
display: none;
}
El navegador comprobará automáticamente el contenido de cada elemento .mensaje y aplicará el estilo solamente al que se encuentre completamente vacío.
Esta característica resulta especialmente práctica cuando trabajas con WordPress, WooCommerce, formularios, tiendas online o páginas generadas dinámicamente, donde pueden aparecer contenedores HTML aunque finalmente no tengan contenido.
Cómo usar :empty paso a paso ✅
Puedes empezar a utilizar esta pseudoclase siguiendo un procedimiento muy sencillo:
- Localiza el elemento HTML que puede aparecer vacío dentro de tu página utilizando las herramientas para desarrolladores del navegador.
- Identifica su clase, ID o etiqueta, como
.mensaje,.precio,.descripcionop. - Añade
:emptyal selector CSS para comprobar automáticamente si ese elemento contiene algo. - Define la propiedad que quieres aplicar, como
display: none, un fondo diferente o un tamaño determinado. - Guarda los cambios y comprueba varios escenarios, incluyendo elementos con contenido y elementos completamente vacíos.
- Si la regla no funciona, inspecciona el HTML para comprobar si existen espacios, saltos, elementos secundarios u otros nodos dentro del contenedor.
Ejemplos prácticos de :empty en CSS 💡
Uno de los usos más habituales consiste en ocultar contenedores vacíos que de otro modo ocuparían espacio innecesariamente dentro de la página.
Puedes hacerlo así:
.contenedor:empty {
display: none;
}
También puedes eliminar visualmente determinados párrafos vacíos:
p:empty {
display: none;
}
Otra posibilidad consiste en identificar elementos vacíos durante el desarrollo aplicándoles temporalmente un borde:
div:empty {
border: 2px solid red;
}
Este pequeño truco puede ayudarte a detectar contenedores innecesarios que están modificando los márgenes, alturas o separaciones de tu diseño.
También puedes aprovechar :empty para mostrar un contenido generado mediante CSS cuando un elemento no contiene información:
.mensaje:empty::before {
content: "No hay información disponible";
}
De esta forma puedes crear un estado vacío sencillo sin necesidad de modificar directamente el HTML.
Qué considera CSS un elemento vacío ⚠️
Uno de los aspectos más importantes al trabajar con :empty es entender que un elemento que parece vacío visualmente no siempre está vacío para CSS.
Este elemento sí puede coincidir con :empty:
<div></div>
Sin embargo, introducir determinados contenidos dentro del elemento puede provocar que la pseudoclase deje de seleccionarlo.
Por este motivo, cuando :empty aparentemente no funciona, conviene revisar cuidadosamente el DOM generado por el navegador.
Puedes hacerlo utilizando las herramientas de desarrollo incluidas en navegadores como Google Chrome o Firefox.
:empty y los elementos hijos 🔎
Un elemento deja de considerarse vacío cuando contiene otro elemento HTML en su interior, aunque ese elemento secundario tampoco muestre información visible.
Por ejemplo:
<div class="caja">
<span></span>
</div>
La caja principal no coincide con:
.caja:empty {
display: none;
}
Esto ocurre porque .caja contiene un elemento <span>, por lo que ya dispone de un nodo hijo.
Si necesitas comprobar estructuras HTML más complejas, probablemente tendrás que combinar :empty con otros selectores CSS.
Combinar :empty con otros selectores 🛠️
La verdadera potencia de esta pseudoclase aparece cuando la combinas con clases, selectores descendientes y otras pseudoclases.
Por ejemplo, puedes ocultar únicamente determinados elementos de una lista cuando estén vacíos:
.lista li:empty {
display: none;
}
También puedes afectar solamente a los elementos vacíos existentes dentro de una sección concreta:
.contenido .descripcion:empty {
display: none;
}
Esta técnica evita aplicar estilos innecesarios a elementos similares ubicados en otras zonas de la página y consigue que tu CSS sea más específico y controlado.
Cómo detectar elementos que no están vacíos 🚀
CSS también permite plantear la situación contraria utilizando la pseudoclase :not() junto con :empty.
Puedes seleccionar elementos que contienen algo utilizando:
.caja:not(:empty) {
border: 1px solid;
}
En este caso, la regla se aplicará solamente cuando .caja no esté vacía.
La pseudoclase :not() forma parte de los selectores estándar de CSS y puedes encontrar información adicional en la documentación de :not() de MDN.
Esta combinación resulta útil cuando quieres modificar estilos dependiendo de si un componente dispone realmente de contenido.
Mostrar un mensaje cuando un elemento está vacío 📭
Otro recurso interesante consiste en combinar :empty con los pseudoelementos ::before o ::after.
Por ejemplo:
.resultados:empty::before {
content: "No se encontraron resultados";
}
Cuando .resultados se encuentre vacío, CSS generará automáticamente el mensaje indicado mediante la propiedad content.
Puedes completar el diseño añadiendo propiedades adicionales:
.resultados:empty::before {
content: "No se encontraron resultados";
display: block;
padding: 20px;
text-align: center;
}
Esta solución puede ser muy útil para construir estados vacíos sencillos, aunque para aplicaciones complejas normalmente será preferible controlar estos mensajes desde el propio HTML o mediante JavaScript.
Tabla resumen de :empty 📋
| Situación | Selector | Resultado |
|---|---|---|
| Ocultar párrafos vacíos | p:empty | Oculta los <p> vacíos |
| Ocultar un contenedor vacío | .caja:empty | Oculta .caja cuando no tiene contenido |
| Detectar elementos vacíos | div:empty | Selecciona los div vacíos |
| Seleccionar elementos con contenido | .caja:not(:empty) | Selecciona cajas que no están vacías |
| Mostrar mensaje alternativo | .caja:empty::before | Permite generar contenido visual |
| Vacíos dentro de una zona concreta | .contenido p:empty | Limita el selector a una sección |
| Elementos vacíos de una lista | li:empty | Selecciona elementos <li> vacíos |
Cuándo utilizar :empty en una web 🌐
La pseudoclase :empty es especialmente interesante cuando trabajas con contenido dinámico que puede aparecer o desaparecer dependiendo de determinadas circunstancias.
En WordPress, por ejemplo, algunos plugins pueden generar contenedores aunque determinadas variables, campos personalizados o contenidos opcionales no tengan ningún valor.
En esos casos puedes utilizar :empty para evitar espacios sobrantes sin tener que modificar las plantillas PHP del sitio.
También puedes aplicarlo en tarjetas de productos, mensajes informativos, resultados de búsqueda, widgets, bloques personalizados, tablas y otros componentes cuyo contenido pueda variar.
Ventajas de utilizar :empty ✨
Una de sus mayores ventajas es que puedes resolver determinados problemas visuales utilizando CSS puro, evitando scripts adicionales para comprobar si un elemento contiene información.
Además, su sintaxis es extremadamente breve, por lo que puedes mantener tus hojas de estilo más sencillas y fáciles de mantener.
También resulta especialmente útil para depurar diseños porque puedes localizar rápidamente elementos vacíos responsables de espacios inesperados dentro de una página.
Su principal limitación es que debes conocer exactamente la estructura HTML generada, ya que un nodo hijo inesperado puede impedir que el selector coincida con el elemento.
Compatibilidad de :empty con los navegadores 🌍
La pseudoclase :empty cuenta con amplio soporte en los navegadores modernos, por lo que puedes utilizarla en la mayoría de proyectos actuales sin recurrir a soluciones alternativas.
Si necesitas comprobar compatibilidad antes de implementar cualquier característica CSS, puedes consultar herramientas como Can I Use para revisar el soporte disponible entre diferentes navegadores y versiones.
Aun así, siempre es recomendable comprobar el resultado en los navegadores principales cuando estés desarrollando una web destinada a un público amplio.
Errores habituales al utilizar :empty ❌
El error más habitual consiste en asumir que cualquier elemento que parezca vacío en pantalla también será considerado vacío por CSS.
Otro fallo frecuente consiste en aplicar :empty al elemento incorrecto porque algunos gestores de contenidos y plugins generan contenedores adicionales alrededor del contenido real.
También conviene evitar selectores excesivamente generales como div:empty dentro de proyectos grandes, ya que podrías terminar ocultando accidentalmente componentes que deban permanecer disponibles por cuestiones de diseño o funcionamiento.
Por esta razón es preferible utilizar selectores específicos, como .producto .descripcion:empty, siempre que conozcas la estructura del componente que quieres modificar.
Conclusión 🎉
Aprender cómo seleccionar elementos vacíos con :empty te proporciona una forma sencilla de controlar aquellos componentes HTML que aparecen sin contenido dentro de una página.
Con una regla tan simple como .elemento:empty { display: none; } puedes eliminar numerosos espacios vacíos, contenedores innecesarios y pequeños problemas de maquetación sin modificar el HTML ni utilizar JavaScript.
Además, combinando :empty con :not(), ::before, ::after y otros selectores puedes desarrollar soluciones mucho más versátiles para adaptar automáticamente tu diseño al contenido disponible.
Si utilizas WordPress, desarrollas plantillas personalizadas o simplemente quieres mejorar tus conocimientos de CSS, :empty es una pseudoclase pequeña pero extraordinariamente práctica que merece tener un sitio entre tus recursos habituales.
