Anchors CSS Attribute Selector
Icons are usually a great indicator of what an action does. For example a little printer icon to print a page or a little PDF icon to download a PDF file.
This practice is used commonly but if you have plenty, it can be hard to maintain if you don't organize your images and code correctly.
Here's a quick spinet of code that will help you create easily action links without the overloading your anchors with CSS
CSS:
a {
display: block;
height: 25px;
padding-left: 25px;
color:#333;
font: bold 15px Tahoma;
text-decoration: none;
background: url(http://www.bookofzeus.com/download/anchors-sprites.png) no-repeat;
}
a[href$='.pdf'] { background-position: 0px 0px; }
a[href$='.xml'] { background-position: 0px -24px; }
a[href$='.zip'] { background-position: 0px -48px; }
a[href$='.vcard'] { background-position: 0px -76px; }
What a[href$='.pdf'] means? It simply means for each a tag that has an href ending (because of the $) with extension will use the CSS code within the curly braces.
This way, every file ending with a specific file extension will use the icon. Here's more information about the selectors