La pseudo-class :empty en CSS para seleccionar elementos sin contenido

Cuando empezamos a trabajar con layouts más complejos tuve que lidiar con contenedores que aparecían “vacíos”, pero que igual ocupaban espacio en pantalla. En ese punto descubrí que la pseudo-clase :empty podía ahorrarme bastante tiempo… aunque también me di más de un golpe al entender qué considera exactamente “vacío” CSS. En esta guía te cuento todo para que no pases por lo mismo.

Antes vimos el selector :checked en CSS, para seleccionar elementos de formulario como radios o checkbox

 ¿Qué selecciona exactamente :empty?

Definición formal: sin nodos hijos ni texto (incluyendo espacios)

:empty selecciona elementos que no contienen ningún nodo hijo:

• ningún elemento HTML.
• ningún texto.
• ni siquiera espacios, saltos de línea o tabs.

Esto significa que algo así:

<div></div>
<p></p>

Sí es :empty, pero lo siguiente no lo es:

<div> </div>     <!-- Un espacio ya rompe :empty -->
<p>Hola</p>      <!-- Texto -->
<div><br></div>  <!-- Tiene un hijo -->
<div><!-- comentario --></div> <!-- comentario = nodo -->

Cuando lo descubrí la primera vez pensé que <div> </div> sería considerado vacío… pero no: ese pequeño espacio ya lo invalida.

Qué no cuenta como contenido (comentarios, pseudo-elementos, etc.)

Algo interesante es que los pseudo-elementos no afectan al estado vacío:

div:empty::before {
 content: "Estoy vacío";
}

Aunque se genere contenido visual, el elemento sigue siendo :empty al momento de evaluar la regla.

Comportamientos sorprendentes: espacios, saltos de línea, etc.

Es muy común que editores de código, generadores de plantillas o CMS inserten saltos de línea sin que te des cuenta:

<div>
</div>

Visualmente parece vacío… pero contiene un text node con un salto de línea → por tanto no coincide con :empty.

En esta entrada veremos como funciona y cómo usar la poco usada y conocida pseudo-class :empty.

¿Cómo funciona la pseudo-class :empty en CSS?

 La pseudo-class :empty permite definir reglas en aquellos elementos que no tengan ningún hijo (otros elementos) dentro del mismo, ningún texto o contenido en general; a continuación se muestran ciertos elementos que pueden ser representados (seleccionados) por la pseudo-class :empty:

 El uso de las pseudo-class :before o :after no cuentan como contenido

 Los elementos anteriores pueden ser representados a través de la pseudo-class :empty y por ende definir sus propias reglas de estilo:

p:empty, div:empty {
	background: blue;
	/*...algo mas*/
}

 Los siguientes elementos no cumplen con la condición anterior de ser "vacíos" y no son seleccionados por la pseudo-class :empty:

 Veamos una serie de posible usos con la la pseudo-class :empty:

Ejemplos Sobre :empty

Divs o contenedores vacíos

Un uso clásico es marcar visualmente los contenedores vacíos para depurar interfaces:

div:empty {
 background: red;
 height: 50px;
}

Si alguna vez intentaste maquetar algo y apareció un “rectangulito fantasma”, sabrás lo útil que es esto para identificar cajas sin contenido.

Celdas de tabla (td) vacías

En tablas grandes es práctico resaltar celdas sin datos:

td:empty {
 background: #eee;
}

Esto ayuda mucho cuando trabajas con datos importados o generados automáticamente y quieres revisar dónde el contenido está incompleto.

Uso con ::before / ::after para placeholders o mensajes

Aunque pueda sonar contradictorio, puedes usar :empty::before para mostrar mensajes en elementos sin contenido:

div:empty::before {
 content: "Este elemento está vacío.";
 color: #555;
 font-style: italic;
}

Lo usé una vez para mostrar placeholders temporales en un panel de administración donde algunos módulos cargaban información después de una petición AJAX.

La pseudo-class :empty para definir cajas (DIVs) con reglas distintas

 Podemos emplear reglas como estas:

div:empty{
  background: red;
}

 Para diferenciar entre los contenedores o cajas que no contengan ningún elemento o textos (de color rojo) a través de colores, formas, bordes, etc de los que sí tengan elementos o textos (de color azul):

<div></div>
<div><p></p></div>
<div><br></div>
<div>Algún texto.</div>
<div><p>Más texto.</p></div>
<div></div>
<div></div>
<div><img src=""/></div>
<div></div>

 La pseudo-class :empty en conjunto con otras pseudo-class

 Podemos aplicar múltiples pseudo-class (anidamiento) en una misma regla, por ejemplo podemos usar la pseudo-class :before luego de la pseudo-class :empty y de esta forma definir contenido cuando el elementos se encuentren "vacíos" aunque suene un poco contradictorio:

div:empty{
   background: red;
}
div:empty:before{
    content:"Este elemento se encuentra vacío."
}

 El HTML:

<div></div>
<div><p></p></div>
<div><br></div>
<div>Algún texto.</div>
<div><p>Más texto.</p></div>
<div></div>
<div></div>
<div><img src=""/></div>
<div></div>

 Para definir espacios vacíos en una tabla

 En este último ejemplo veremos cómo diferenciar entre las celdas que se encuentren vacías (<td></td>) o carente de elementos de las que si contienen alguna información:

td:empty{
    background: #DDD;
}

 El HTML:

            <table>
                <tr>
                    <th>Casa Baratheon</th>
                    <th>Casa Greyjoy</th>
                    <th>Casa Stark</th>
                    <th>Casa Martell</th>
                    <th>Casa Tully</th>
                </tr>
                <tr>
                    <td>Stannis Baratheon</td>
                    <td></td>
                    <td>Arya Stark</td>
                    <td></td>
                    <td>Cathelyn Tully</td>
                </tr>
                <tr>
                    <td>Renly Baratheon</td>
                    <td>Balon Greyjoy</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Joffrey Baratheon</td>
                    <td>Maron Greyjoy</td>
                    <td>Bran Stark</td>
                    <td>Trystane</td>
                    <td></td>
                </tr>
                <tr>
                    <td>Tommen Baratheon</td>
                    <td></td>
                    <td>Rickon Stark</td>
                    <td>Quentyn</td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>Eddard Stark</td>
                    <td>Arianne</td>
                    <td>Bryden Tully</td>
                </tr>
            </table>

Casos de uso reales y buenas prácticas

Ocultar contenedores vacíos en sitios dinámicos / CMS

Cuando un CMS deja contenedores sin contenido (algo muy común), puedes limpiarlos así:

section:empty {
 display: none;
}

Esto mantiene el layout limpio sin tener que revisar manualmente cada módulo.

Limpieza de layout / evitar espacios en blanco indeseados

Durante la maquetación de plantillas, a veces aparecen contenedores huérfanos que generan espacios raros. Una simple regla con :empty ayuda a detectarlos:

*::before,
*::after {
 /* estilos */
}
div:empty {
 outline: 1px dashed red;
}

Estilizado condicional en interfaces dinámicas

Si generas tarjetas, notificaciones o entradas dinámicamente, puedes asegurarte de que los contenedores sin contenido tengan un estilo alternativo o no se muestren.

Limitaciones y cosas a tener en cuenta

Qué rompe el estado “vacío”. Cualquier cosa de esta lista invalida :empty:

• texto (incluso una sola letra),
• espacios, tabs, saltos de línea,
• comentarios HTML,
• nodos de texto invisibles,
• elementos hijos (<br>, <p>, <img>, etc.).

Compatibilidad de navegadores

Por suerte, :empty tiene compatibilidad excelente en navegadores modernos. Funciona en Chrome, Firefox, Safari, Edge y prácticamente todos los navegadores actuales.

Cuándo considerar alternativas

Si necesitas ignorar espacios en blanco o saltos de línea generados automáticamente, :empty no sirve. Alternativas:

• Limpiar el contenido vía backend o JavaScript.
• Usar clases dinámicas (.is-empty, .has-content).
• Manipular nodos con JS para controlar cuándo un elemento debe considerarse “vacío”.

FAQ

• ¿Los espacios cuentan como contenido?
  • Sí, un solo espacio lo descalifica de :empty.
• ¿Los comentarios HTML afectan?
  • Sí. Un comentario es un nodo → el elemento deja de estar vacío.
• ¿Puedo combinar :empty con ::before?
  • Sí, y se usa mucho para mostrar mensajes en elementos vacíos.
• ¿Funciona en todos los navegadores modernos?
  • Sí, su soporte es excelente.
• ¿Sirve para ocultar contenedores vacíos?
  • Exactamente. Es uno de sus usos más comunes.

Conclusión

La pseudo-clase :empty es mucho más útil de lo que parece. Puede ayudarte a depurar, estilizar, ocultar o identificar elementos sin contenido real. Solo debes tener presente que “vacío” significa realmente vacío, sin nodos, sin texto, sin espacios. Si lo entiendes bien, te ahorrará tiempo y dolores de cabeza, especialmente en proyectos donde el contenido no siempre está bajo tu control.

El siguiente selector que vamos a ver, pseudo-clase :target de CSS para representar un elemento único mediante el id.