Selectores avanzados de atributos

5/Jun/2007 267

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

SafariFirefoxInternet Explorer 7OperaCamino

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:

Comentarios

  1. provigilpill [#]

    modafinil mechanism of action provigil for sale

  2. howtogetmodafinil [#]

    armodafinil vs modafinil https://modafinilltop.com/

  3. bactrim ds side effects [#]

    sulfamethoxazole side effects trimoxazole tablets ip

  4. supreme clothing [#]

    I precisely had to appreciate you all over again. I do not know what I might have tried without the type of methods contributed by you relating to such a field. It truly was a frightful difficulty in my position, nevertheless considering your professional technique you resolved the issue forced me to cry with contentment. I am happy for your work and thus pray you find out what a great job your are providing instructing the rest through your blog. I am sure you have never got to know all of us.

  5. yeezy 500 blush [#]

    I simply wanted to make a simple comment in order to say thanks to you for those remarkable techniques you are placing on this website. My rather long internet investigation has now been recognized with extremely good content to talk about with my colleagues. I would believe that we readers actually are undoubtedly endowed to live in a wonderful site with very many brilliant people with very helpful tips. I feel somewhat lucky to have come across your web pages and look forward to some more exciting minutes reading here. Thanks a lot once again for all the details.

  6. curry 8 [#]

    I’m just writing to let you be aware of what a fine encounter my girl enjoyed checking your web site. She realized such a lot of things, which include what it is like to have an awesome giving style to make many more without problems master certain very confusing subject matter. You truly did more than our own expectations. I appreciate you for giving these necessary, trustworthy, edifying as well as unique tips about that topic to Mary.

  7. lebron 18 [#]

    I have to convey my respect for your kindness for all those that have the need for assistance with this particular question. Your personal commitment to passing the solution up and down came to be rather functional and have helped some individuals like me to reach their ambitions. Your entire important recommendations signifies much a person like me and especially to my office workers. Many thanks; from all of us.

  8. drineexsjo [#]

    cheap prednisolone prednisone precautions

  9. side effects of accutane [#]

    https://accutaneisotretinoine.com/ how does accutane work

  10. provigilsideeffects [#]

    https://modafilmodafinil.com/ modafinil online

  11. bactrim antibiotic [#]

    bactrim co trimoxazole side effects

  12. stromectolforte.com [#]

    stromectol аёЄаё«аёЈаёІаёЉаё­аёІаё“аёІаё€аё±аёЃаёЈ http://stromectolforte.com/# stromectol where to buy ivermectin in phoenix

  13. ivermectin 12 mg tablets for sale [#]

    where to buy ivermectin https://stromectolforte.com/ buy ivermectin 6mg can humans take ivermectin paste

  14. doctorborat.com [#]

    can i have psoriatic arthritis when i have just a very small spot of psoriasis http://doctorborat.com – erectile pills

  15. levitra v viagra [#]

    army acft mens health http://withoutscript.com – order brand viagra

  16. Zakblabs [#]

    viagra for sale over the counter

  17. ivermectin for sale [#]

    Non-specific Low-down Fro this offshoot
    https://ivermectinstrom.com ivermectin for sale
    https://ivermectinsts.com ivermectin for humans
    https://stromectolivermect.com ivermectin tablets for humans for sale
    https://ivermectstromect.com stromectol
    https://stromectolivermect.com ivermectin for sale

CSSLab