I came across this little article on another site and thought it was really cool!
Thanks to CSS selectors you can use CSS conditionally. For instance…
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
This would attach a pdf icon to the right of any hyperlink who’s URL ended in ‘.pdf’ like this. I could show the file type visually with that application’s icon just by including a few lines in my master css file. I didn’t have to worry about it at all in my html, css would add the icon for me automatically.
This trick makes use of what the official specifications call “attribute selectors”. For instance in our above example we have our anchor tag which says to style this element for anchors and then, defined by brackets, [href $='.pdf'], we see if the anchor has an href attribute and if it does if that attributes value ends in ‘.pdf’.
Here are some nice Doc Type Icons for free download
Have Fun!