CSS :empty Pseudo Clase
Usa la pseudo-clase CSS :empty para seleccionar elementos vacíos. Lee sobre la pseudo-clase y practica con ejemplos.
La pseudo-clase CSS :empty selecciona elementos que no tienen ningún hijo en absoluto — ni elementos hijo ni contenido de texto. Es más útil para dar estilo u ocultar contenedores "vacíos" que provienen de una plantilla, CMS o API sin nada dentro, de modo que puedas colapsar el espacio que de otro modo dejarían en la página.
Esta página explica cómo :empty determina si un elemento está vacío, el problema habitual con los espacios en blanco que confunde a la mayoría de las personas, un uso práctico para ocultar bloques vacíos y ejemplos ejecutables que puedes editar.
Qué se considera vacío
Un elemento coincide con :empty cuando, entre su etiqueta de apertura y cierre, no hay nada — ni texto, ni comentarios como contenido, ni elementos anidados:
- Si una etiqueta de cierre sigue directamente a la de apertura (
<p></p>), el elemento está vacío. - Los elementos de cierre automático como
<hr />,<br />e<img />no tienen posibles hijos, por lo que siempre coinciden con:empty. - Los pseudoelementos
::beforey::afterno se cuentan como hijos. Un elemento con contenido generado por::before/::aftersigue coincidiendo con:emptyporque ese contenido no forma parte del DOM.
El problema con los espacios en blanco
Los espacios en blanco cuentan como contenido de texto, por lo que un elemento no está vacío si contiene espacios, tabulaciones o saltos de línea:
<p></p>
<!-- Matches :empty — truly empty -->
<p>
</p>
<!-- Does NOT match — the newline and spaces are text content -->Esta es la razón más común por la que :empty "no funciona": una plantilla que formatea su salida deja espacios en blanco entre las etiquetas. Si necesitas coincidir con elementos que contienen solo espacios en blanco, consulta la pseudo-clase :blank (aún experimental) o elimina los espacios en blanco de tu marcado. Para seleccionar elementos por otras condiciones, consulta :not().
Sintaxis
Ejemplo de sintaxis CSS :empty
:empty {
css declarations;
}Ejemplo del selector :empty con la etiqueta <p>:
Código de ejemplo CSS :empty
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:empty {
width: 200px;
height: 30px;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p></p>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Ejemplo del selector :empty con la etiqueta <div>:
Otro código de ejemplo CSS :empty
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:empty {
background-color: #ccc;
padding: 15px;
width: 50%;
height: 50px;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<div></div>
<p>
Lorem Ipsum is simply dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Ocultar elementos vacíos
Un uso frecuente en el mundo real es colapsar un elemento que llegó vacío para que no deje un margen, borde o fondo de relleno. Combina :empty con display: none:
/* An alert box that should disappear when it has no message */
.alert:empty {
display: none;
}Ahora <div class="alert"></div> se elimina del diseño, mientras que <div class="alert">Saved!</div> se renderiza con normalidad. Esto mantiene tu CSS a cargo del resultado visual en lugar de requerir lógica del lado del servidor para omitir el elemento.
Compatibilidad con navegadores y versión
:empty es compatible con todos los navegadores modernos. Fue definida en dos especificaciones, ambas con el mismo comportamiento:
Selectors Level 4 mantiene el mismo comportamiento para :empty que Level 3, coincidiendo únicamente con elementos que no tienen absolutamente ningún hijo — el texto, los comentarios y los elementos anidados invalidan la coincidencia.