CSSLab

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/"] {
     font-weight: bolder;
}

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.

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'] {
     background: url(icono_blank.gif) right center no-repeat;
     padding-left: 20px;
}

Ver ejemplo

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

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

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

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

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

Finalmente, y como me imagino que esperaban, tanta maravilla no funciona en IE6. Más un argumento para enterrarlo de una vez por todas.

Links:

• Cascading Style Sheets 2 Attribute Selectors