Ya sabemos que para aplicar estilos a un documento HTML utilizamos los selectores CSS. Un selector se define como el código que identifica a uno o varios elementos HTML para aplicarle estilos de color, tamaño, separación, etc. Los selectores más comunes son aquellos que se asignan a clases (class), identificadores (id) o directamente a elementos HTML como por ejemplo capas (div). Sin embargo en desarrollos complejos necesitamos utilizar otros selectores más avanzados para poder aplicar diferentes estilos en elementos anidados o listados complejos, como puede ser una capa dentro de otra con el mismo nombre de clase.

Hoy en día CSS3 nos permite utilizar múltiples selectores de forma que podemos aplicar estilos a cada uno de los elementos de nuestro desarrollo sin necesidad de aplicar nombres de clase o id. Vamos a realizar un repaso de ellos viendo ejemplos prácticos de su uso. Para ello, utilizaremos la una estructura de elementos anidados a los que iremos aplicando diferentes estilos.

Selectores CSS

EJEMPLOS PRACTICOS

1

[class*="col-"] { border-color: red;}

Asignamos a todos los elementos que contengan la clase con la palabra "col-" el color rojo.

2

a[target="_blank"] { color: green; } 

Asignamos a todos los elementos "a" que tengan el atributo target igual a blank, el color verde.

3

a:not([target="_blank"]) { color: purple;  }

Asignamos a todos los elementos "a" que NO tengan el atributo target igual a blank, el color morado.

4

li:first-of-type + li {color: red;}

    
Uno
    
Soy rojo
    
Tres

Asigna el color rojo al primer elemento de la lista adyacente al primer li. O sea al 2 < li >.

5

 
Lorem ipsum
 
Dolor sit amet
 
Lorem ipsum
 
Soy rojo
 
Lorem ipsum
 
Soy rojo

Con ~ indicamos los elementos que preceden el elemento que se encuentra a la derecha.

En este fragmento de código, ambos párrafos después de < h2 > serán rojos, pero el primero no, ya que no viene después de un < h2 > en el documento.

6.

Soy Silvia

Soy Silvia

Soy Silvia


Soy rojo!

Selecciona todos el elemento p adyacente al div especificado.

 

7.

    
Parrafo - 1 en un div
    
Parrafo - 2 en un div

Parrafo - 3 soy verde 
Parrafo - 4 soy verde
Parrafo - 5 en verde 
 
	
Parrafo - 6 en un div

Parrafo - 7 soy verde

El ejemplo establece el color de texto rojo para todos los elementos "p" de un hermano en un elemento DIV con ID "divb" (

#d1 > div > p {
color: red;
}

#d1  div  p {
color: red;
}

#d1 > div > div p {
color: red;
}

p + div > p {
color:red;
}

p + div  p {
color:red;
}

#d11.childcntl {
color:red;
}

#d1 > p, #d11 > p {
color:red;
}

#d11 + .childcntl {
color:red;
}