CSS Selectors

When I first started to setup this blog I made a number of changes to the standard template I choose to use. One of the things I wanted to be able to do was add representative icons to links to show their file types. You may already have seen this in my post on the BBC iPlayer, but in case you missed it here is another link to the solution I provided in that posting. Now assuming that you are reading this in Internet Explorer 7, Firefox, Opera or Safari there should have been a little zip icon following that link. If your using some other browser here is what the link should look like in a screenshot of the link in the iPlayer post:
This is achieved using CSS attribute selectors. Basically I have a CSS rule that checks the destination of every link and if it ends in .zip then it adds the little icon. There are six easy to use CSS attribute selectors that allow you to match attributes in different ways: starts with, ends with, contains, is exactly equal to, has the attribute, match one item in a space separated list.

So that I don't have to pollute my main template file with lots of rules just to show an example of each I've put together a separate demo page. If you want more details than there are in the demo then take a look at the CSS3 Selectors specification, which defines these attribute selectors as well as a whole load of others.

If you intend to use any of these CSS rules it is worth remembering that to get them to work at all in Internet Explorer not only do you have to be using version 7 but you must ensure that your HTML page specifies the HTML 4.01 strict doctype, because in quirks mode IE totally ignores all these CSS rules.