Anchors CSS Attribute Selector

Posted on Tuesday January 17, 2012 / by Eric Potvin

Icons are usually a great indicator of what an action do. 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

Demo:

PDF File XML File