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

- Andrés Cruz

Sin duda alguna existe una gran cantidad de pseudo-class en CSS; de las cuales ya hemos tratado::

Algunas de estos selectores son más usados que otros pero todos a la final útiles dada alguna situación; 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:

Sin elementos y sin texto:
<p></p>
<div></div>

El selector o pseudo-class :empty representa a los elementos que no tienen hijos/nodos ni contenido (incluyendo comentarios)

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:

Con elementos <div><p>Elemento con algún texto</p></div>
Con textos <p>Elemento con algún texto</p>

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

Ejemplo 1: 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>

Ejemplo 2: 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."
            }
<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>

Ejemplo 3: La pseudo-class :empty 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;
            }
            <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>

Puedes ver alguna otra información como la compatibilidad con los navegadores en el siguiente enlace ofrecido por la MDN :empty.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy