Loading...

Introducción a CSS 2.2. Selectores avanzados


Introducción a CSS
2.2. Selectores avanzados
Utilizando solamente los selectores básicos de la sección anterior, es posible diseñar
prácticamente cualquier página web. No obstante, CSS define otros selectores más avanzados que permiten simplificar las hojas de estilos.
Desafortunadamente, el navegador Internet Explorer 6 y sus versiones anteriores no soportaban este tipo de selectores avanzados, por lo que su uso no era común hasta hace poco tiempo. Si quieres consultar el soporte de los selectores en los distintos navegadores, puedes utilizar las siguientes referencias:
▪ Lista completa de los selectores que soporta cada versión de cada navegador
(http://dev.l-c-n.com/CSS3-selectors/browser-support.php)
▪ Test online en el que puedes comprobar los selectores que soporta el navegador con el que realizas el test (http://www.css3.info/selectors-test/)
2.2.1. Selector de hijos
Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento.
Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el "signo de mayor que" (>):
p > span { color: blue; }
Texto1

Texto2

En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento que sea hijo directo de un elemento
", por lo que el primer elemento cumple la condición del selector. Sin embargo, el segundo elemento no la cumple porque es descendiente pero no es hijo directo de un elemento
.
El siguiente ejemplo muestra las diferencias entre el selector descendente y el selector de hijos:
p a { color: red; }
p > a { color: red; }
Enlace1

Enlace2

El primer selector es de tipo descendente y por tanto se aplica a todos los elementos que se encuentran dentro de elementos
. En este caso, los estilos de este selector se aplican a los dos enlaces.

. Por lo tanto, los estilos del selector p > a no se aplican al segundo enlace del ejemplo anterior.