Selectores CSS avanzados
Selectores CSS avanzados  |
|---|
Sumario
Selectores avanzados
Utilizando exclusivamente los selectores básicos, es posible diseñar cualquier página web. No obstante, CSS define otros selectores más avanzados que permiten simplificar el diseño de las hojas de estilos. Desafortunadamente, el navegador Internet Explorer 6 y sus versiones anteriores no soportan este tipo de selectores avanzados, por lo que su uso no está muy extendido. En la siguiente página se muestra el soporte de todos los selectores de CSS 1, CSS 2 y CSS 3 en los diferentes navegadores: http://dev.l-c-n.com/CSS3-selectors/browser-support.php Además, existe un test que permite probar los selectores que soporta el navegador con el que se realiza la prueba: http://www.css3.info/selectors-test/
Selector de hijos
Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. El símbolo empleado en el selector es el “signo de mayor que” (>) y se emplea para seleccionar un elemento que es hijo directo de otro elemento. p > span { color: blue; }
Texto1
<a href="#">Texto2</a>
En el ejemplo anterior, el selector p > span se traduce como “cualquier elemento span que se encuentre directamente dentro de un elemento p“. El texto1 pertenece a un elemento span directamente hijo de un elemento p, por lo que se cumple la condición del selector. En cambio, el texto2 se encuentra dentro de un elemento span que a su vez está dentro de un elemento a que es el que está directamente dentro del elemento p. Como entre el elemento p y el elemento span existen otros elementos, no se cumplen las condiciones del selector y no se le aplicarían los estilos. El siguiente ejemplo muestra las diferencias entre el selector descendente y el selector de hijos: p a { color: red; } p > a { color: red; }
<a href="#">Enlace1</a>
<a href="#">Enlace2</a>
El primer selector es de tipo descendente y por tanto se aplica a todos los elementos a que se encuentren dentro de elementos p. En este caso, los estilos de este selector se aplicarían a los dos enlaces. Por otra parte, el selector de hijos obliga a que el elemento a se encuentre directamente en un elemento p, sin ningún otro elemento intermedio. Por tanto, en este caso, los estilos del selector p > a no se aplicarían al segundo enlace.
Selector adyacente
El selector adyacente es uno de los más avanzados y su explicación no es sencilla. El selector utiliza el signo + y su sintaxis es: elemento1 + elemento2 { ... } El selector adyacente selecciona todos los elementos de tipo elemento2 cuyo elemento padre sea el mismo que el de los elementos elemento1, con la condición adicional de que elemento2 debe estar inmediatamente después que el elemento1. En el siguiente ejemplo:
Los estilos del selector h1 + h2 se aplican al primer elemento h2 de la página, pero no al segundo h2:
- El elemento padre del primer h2 es body, y también tiene el mismo elemento padre el elemento h1. Como la primera condición se cumple (que los dos elementos
tengan el mismo padre) se comprueba la segunda condición: que h2 esté seguido de h1. En este caso, la segunda condición también se cumple, por lo que el primer elemento h2 cumple con el selector h1 + h2.
- En el segundo elemento h2, la primera condición también se cumple: que los dos
elementos tengan el mismo elemento padre. Sin embargo, el segundo elemento h2 no va inmediatamente después de un elemento h1, por lo que la segunda condición del selector no se cumple y no se le aplicarán los estilos. 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én indentadas, 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.
Selector de atributos
Por último, dentro de los selectores avanzados, CSS define los selectores de atributos. Este tipo de selectores permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos. Los 4 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. 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 }
Fuente
Libro "Introducción a CSS" del autor Javier Eguíluz Pérez, 20 de febrero de 2008. Los contenidos de este libro están bajo una licencia Creative Commons.
