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.
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;
}
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;).
Finalmente, y como me imagino que esperaban, tanta maravilla no funciona en IE6. Más un argumento para enterrarlo de una vez por todas.
maldito ie6… cuando sera el dia en que su participacion de mercado sea minima
Muy bueno el articulo, ya conocía algo sobre estos selectores, pero tengo la duda si existe algo para que funcione en IE, como por ejemplo existe el csshover.htc o el iepng.htc, estos solucionan esos problemas, no conocen alguno para los selectores?
Saludos
No habia llegado al final y ya estaba abriendo IE7 para probarlo, y volia funciono, pero, me dije, no creo que funcione en IE6, tanta suerte no puede ser posible y luego de probarlo, lei tus palabras magicas “no funciona en IE6″
Son bastante útiles, eso si quiza generel problemas con links en menues en donde no se quiera especificar el tipo de link o el tipo de archivo a mostrar, nada que no se pueda solucionar.
Crëam, es solo especificar donde quieres q se vea, por ejemplo div#content a[href $='.pdf']… salu2.