In the wonderful world of CSS you can use different selector to locate the element you want. Some of them even allow you to filter the element by a certain property. In this example we will use the “href” attribute of the “a” tag to add an image in function of the file type linked.

In other words, if I have a link to a psd file, it will automatically add a little psd icon in front of the link. All of this is done in CSS using selectors.

The Selector in this case is [href $=ext] where ext is the extension you want to test. The $ is here to say “ended by”. In CSS we get:

a[href $= psd]{
padding-left:20px;
background:transparent url(psdIcon.png) no-repeat left top
}

So for each link linking to a psd file we adding a padding left, to leave the space for the image and a psd icon. That’s it, dead simple. Now think about the possibilities, and that’s just on links, selectors works for a lot of other tags (very useful on input element for example).