Today a co-worker of mine had a simple problem that he wanted some help with. He needed to find all the “a” tags within a specific div, and if its href attribute ended in .pdf, then add a background image to it. I am going to guess that most people would just go and add a class to all the “a” tags that needed the image. That just puts more html on the page, when you can effectively do this with just some css.

Take into account, this example that we used today, works in all modern browsers, but not IE6-. Worked in IE7, so that was a good plus.

Here is the css:

#divId a[href$=".pdf"] {
     background-image: url(../images/imageName.gif);
}

This says get the div with whatever id you are looking for, with an “a” tag, that has an “href” attribute that ends with exatly “.pdf”, and add the background-image to it.

I then did the same thing but for all links that got to “.docs”, and displayed a different image. So the second style was:

#divId a[href$=".doc"] {
     background-image: url(../images/imageName2.gif);
}

If you actually wanted to hit ALL the “a” tags within the site like that, just remove the #divId from the style.