• Categorías
• /
• CSS
• /
• La pseudo-class :empty en CSS para seleccionar elementos sin contenido

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>

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.