DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
15-12-2014

Sin duda alguna existe una gran cantidad de pseudo-class en CSS, algunas de ellas más usadas que otras 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 o ningún texto; 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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

3D Box Control conTweenMax

3D Box Control conTweenMax

6 Loaders con CSS

6 Loaders con CSS

Creando un pulso con CSS

Creando un pulso con CSS

Algunos artículos que te pueden interesar

La pseudo-class :target en CSS

La pseudo-class :target en CSS

Este selector o pseudo-class es empleado para seleccionar o dar estilo a un único elemento cuyo id coincida en alguno de los elementos HTML.

Andrés Cruz 23-02-2015

Múltiples columnas con CSS3

Múltiples columnas con CSS3

Con la propiedad Multi-column de CSS3 podemos dividir nuestro párrafos en columnas; utilizando algunos atributos.

Andrés Cruz 28-10-2013

¿Cómo hacer una simple galería responsive con CSS 2?

¿Cómo hacer una simple galería responsive con CSS 2?

En esta entrada veremos como hacer una simple galería responsive empleando un poco de CSS y nada más.

Andrés Cruz 13-11-2014