Selectores CSS avanzados
August 28th, 2008
Ahora que IE 6 parece que está empezando a desaparecer de nuestras vidas (casi la mitad de los usuarios de IE se han pasado al 7) y por tanto de nuestras pesadillas, sería bueno recordar algunos de los selectores que por su culpa nos hemos podido utilizar de forma normal.
Todos tenemos en mente el selector universal (* {…}), el selector de tipo o etiqueta (p {…}), el selector descendente (p span {…}), el selector de clase (.clase {…}) y el selector de id (#id {…}). Pero, ¿alguien recuerda el selector de hijos, el selector de adyacentes o el selector de atributos?
Estos selectores (entre otros muchos) han sido los grandes damnificados del aplastante dominio tiránico que ha ejercido IE 6 a lo largo de los años. Este tipo de selectores no funcionan con este “navegador” por lo que no se ha podido hacer uso de ellos abogando por el “bien común”.
Pasemos a ver cómo funcionan algunos de estos selectores:
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” (>). Por ejemplo:
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>.
Selector adyacente:
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:
-
elemento1yelemento2deben ser hermanos, por lo que su elemento padre debe ser el mismo. -
elemento2debe aparecer inmediatamente después deelemento1en 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:
- El elemento padre del primer
<h2>es<body>, el mismo padre que los dos elementos<h2>. - El primer elemento
<h2>aparece en el código HTML justo después del elemento<h1>, por lo que se cumple la segunda condición. - El segundo elemento
<h2>no aparece justo después del elemento<h1>, por lo que no se cumple la segunda condición y el selectorh1 + h2no se aplica en el segundo elemento<h2>.
Selector de atributos:
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 llamadonombre_atributo, independientemente de su valor. -
[nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributocon un valor igual avalor. -
[nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributoy al menos uno de los valores del atributo esvalor. -
[nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributoy cuyo valor es una serie de palabras separadas con guiones, pero que comienza convalor. Este tipo de selector sólo es útil para los atributos de tipolangque 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 }
Estos son algunos de los “olvidados” que pueden volver con más fuerza a medida que el “demonio” (cambiese por IE 6) desaparezca de nuestras vidas.
Por último, una aplicación que te dice qué selectores son válidos para el navegador que usas en ese momento:
Test de selectores CSS en red
Categoría: Diseño web
1 Comentario Deja tu comentario
1. Laura | August 28th, 2008 at 2:53 am
bueno bueno, habrá que empezar a poner esto en práctica… ¡y a ver si es cierto que IE6 va a desaparecer de nuestras vidas!
Deja tu comentario
Tags HTML Permitidos:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed