I love having the icons next to links to "non-web" documents (.pdf, .xls, .doc, etc...). However, it never fails that I inadvertently miss a couple of these when creating the links. And when I do remember to add the class, I always have to look up the name.

So I decided to come up with a better way to using this. It boils down to a few things: CSS selectors and JavaScript.

With CSS selectors, we can create a CSS rule to automatically apply a style definition based on the href value:

This automatically adds the icon to each link that ends in ".pdf" (hence the links to .pdf documents). No more having to manually add the class each time!

The one issue with this is the lack of support for IE6 and lower. The solution for this is to use JS to apply the original CSS class ("application-pdf") to the A tag. Since I have jQuery loaded on my pages, I created a rule which will run if the browser is IE6 or lower and will add the original CSS class to the A tag.