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:

pdfscreen

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

Share this article

Tim Grahl Avatar

Author


Comments

  1. Will Avatar

    It works so well you decided to show an image as opposed to an example of the actual code. Love the simplistic design of the site. Very pleasing to the eye.


Leave a Reply

Your email address will not be published. Required fields are marked *

See Also