My New Favorite CSS Selector

I recently read the book “CSS Mastery: Advanced Web Standards Solutions” which I highly reccommend to anyone who uses CSS extensively. In the book it lists not just what you can do, but how to do it right. One selector that I read about in the book and implemented last week was the [att$=val] attribute selector.

This selector is super easy to use and looks like this:

a[href$=".pdf"] {
    padding:7px 0 4px 31px;
    background: url(images/pdfsmall.jpg) no-repeat left top;
    display: block;
}

This way any time someone links a .pdf document, a “Acrobat Reader” icon will show up to the left of the link, this way the visitor knows what he’s getting into when he clicks it.

Now the link looks like this:

This works just as well with any other attribute. Just swap out the .pdf and image name and there it is.

Note: It should be stated that this attribute selector doesn’t work in IE6 (what a shocker). Although it does degrade gracefully into just a standard link.