My New Favorite CSS Selector

by  Joseph Hinson

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.

Joseph HinsonJoseph Hinson is the president and owner of Out:think Group, a firm that helps authors build their platforms, connect with readers and sell more books.

Are you building your author platform?

Sign up to get exclusive tips and resources from Out:think Group.

Questions? Feedback?