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:
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; } <p><span>Texto1</span></p> <p><a href="#"><span>Texto2</span></a></p>
En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento <span> que sea hijo directo de un elemento <p>", por lo que el primer elemento <span> cumple la condición del selector. Sin embargo, el segundo elemento <span> no la cumple porque es descendiente pero no es hijo directo de un elemento <p>.
El siguiente ejemplo muestra las diferencias entre el selector descendente y el selector de hijos:
p a { color: red; } p > a { color: red; } <p><a href="#">Enlace1</a></p> <p><span><a href="#">Enlace2</a></span></p>
El primer selector es de tipo descendente y por tanto se aplica a todos los elementos <a> que se encuentran dentro de elementos <p>. En este caso, los estilos de este selector se aplican a los dos enlaces.
Por otra parte, el selector de hijos obliga a que el elemento <a> sea hijo directo de un elemento <p>. Por lo tanto, los estilos del selector p > a no se aplican al segundo enlace del ejemplo anterior.
El selector adyacente utiliza el signo + y su sintaxis es:
elemento1 + elemento2 { ... }
La explicación del comportamiento de este selector no es sencilla, ya que selecciona todos los elementos de tipo elemento2 que cumplan las dos siguientes condiciones:
elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre debe ser el mismo.elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML de la página.En el siguiente ejemplo:
h1 + h2 { color: red } <body> <h1>Titulo1</h1> <h2>Subtítulo</h2> ... <h2>Otro subtítulo</h2> ... </body>
Los estilos del selector h1 + h2 se aplican al primer elemento <h2> de la página, pero no al segundo <h2>, ya que:
<h1> es <body>, el mismo padre que el de los dos elementos <h2>. Así, los dos elementos <h2> cumplen la primera condición del selector adyacente.<h2> aparece en el código HTML justo después del elemento <h1>, por lo que este elemento <h2> también cumple la segunda condición del selector adyacente.<h2> no aparece justo después del elemento <h1>, por lo que no cumple la segunda condición del selector adyacente y por tanto no se le aplican los estilos de h1 + h2.El siguiente ejemplo es muy útil para los textos que se muestran como libros:
p + p { text-indent: 1.5em; }
En muchos libros, suele ser habitual que la primera línea de todos los párrafos esté indentada, salvo la primera línea del primer párrafo. Con el selector p + p, se seleccionan todos los párrafos que estén dentro del mismo elemento padre que otros párrafos y que vayan justo después de otro párrafo. En otras palabras, el selector p + p selecciona todos los párrafos de un elemento salvo el primer párrafo.
El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.
Los cuatro tipos de selectores de atributos son:
[nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.[nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.[nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.[nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.A continuación se muestran algunos ejemplos de estos tipos de selectores:
/* Se muestran de color azul todos los enlaces que tengan un atributo "class", independientemente de su valor */ a[class] { color: blue; } /* Se muestran de color azul todos los enlaces que tengan un atributo "class" con el valor "externo" */ a[class="externo"] { color: blue; } /* Se muestran de color azul todos los enlaces que apunten al sitio "http://www.ejemplo.com" */ a[href="http://www.ejemplo.com"] { color: blue; } /* Se muestran de color azul todos los enlaces que tengan un atributo "class" en el que al menos uno de sus valores sea "externo" */ a[class~="externo"] { color: blue; } /* Selecciona todos los elementos de la página cuyo atributo "lang" sea igual a "en", es decir, todos los elementos en inglés */ *[lang=en] { ... } /* Selecciona todos los elementos de la página cuyo atributo "lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */ *[lang|="es"] { color : red }