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

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

Gradientes sobre el texto

Gradientes sobre el texto

Modelo de tarjetas con CSS

Modelo de tarjetas con CSS

Algunos artículos que te pueden interesar

Truco para los bordes en CSS: Bordes internos

Truco para los bordes en CSS: Bordes internos

En esta entrada veremos como crear bordes que no influyan en el tamaño del contenedor; como bien sabrás al definir distintas propiedades como padding, margin y/o border éstas repercuten directamente en el tamaño del contenedor.

Andrés Cruz 13-04-2015

La propiedad clip-path en CSS para seleccionar regiones a mostrar en elementos

La propiedad clip-path en CSS para seleccionar regiones a mostrar en elementos

La propiedad clip-path de CSS permite especificar regiones de cualquiera de los elementos existentes en HTML a través de formas geométricas.

Andrés Cruz 18-12-2014

¿Cómo cubrir todo el fondo con una imagen con CSS?

¿Cómo cubrir todo el fondo con una imagen con CSS?

En esta entrada veremos una técnica que permite que una imagen de fondo cubra todo el ancho del navegador web.

Andrés Cruz 16-09-2014