Selectores avanzados de atributos

Con este artículo les mostraré una manera de cómo CSS realmente potencia la presentación de un sitio, aportando más hacia la accesibilidad y usabilidad que a los muchos argumentos que hemos entregado hasta ahora.

CSS2 nos permite aplicar estilos a elementos basándose en los atributos definidos en las etiquetas HTML, incluso a los valores contenidos en esos atributos. Primero que nada, veamos cómo se declara estos selectores avanzados:

a[href="http://www.csslab.cl/"] {<br />
     font-weight: bolder;<br />
}

Como se nota, a diferencia de lo que usualmente se hace, se define el atributo entre corchetes ( [href] ). En este ejemplo, lo que se logrará es que un ejemplo con link a este sitio tenga la fuente en negrita.

Ver ejemplo{.verejemplo}

Una excelente manera de aportar a la usabilidad, es entregándole al usuario la posibilidad de saber cuándo un link es externo, o cuando quieres q se abra en una ventana nueva (target="_blank"). Esto se logra agregando un ícono descriptivo luego del enlace, de la siguiente manera:

a[target='_blank'] {<br />
     background: url(icono_blank.gif) right center no-repeat;<br />
     padding-left: 20px;<br />
}

Ver ejemplo{.verejemplo}

O si quieres que un enlace a un .pdf tenga un ícono especial:

a[href $='.pdf'] {<br />
     background: url(icono_pdf.gif) right center no-repeat;<br />
     padding-left: 25px;<br />
}

En este ejempo, con el símbolo $ indicamos que el atributo termina con un .pdf. Otro más:

a[href ^= "mailto:"] {<br />
     text-decoration: overline;<br />
}

Aquí, si un enlace es a un email a través de mailto (^ quiere decir comienza con) le damos una línea sobre el texto (text-decoration: overline;).

Ver todos los ejemplos{.verejemplo}