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

15-12-2014 - Andrés Cruz

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

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!