Today, a lovely man by the name of Brian Yerkes revealed to me a CSS trick that I did not even think in my wildest working hours could exist. (I don't dream of CSS, I'm not as passionate as Jiro.

You can target file extensions with css.

There. you heard it. FILE EXTENSIONS.

It works almost the same as targeting 'title', but you just target a link. Here's some example code for you to pine over:

a[href$=".pdf"] { background: url(/pdf.png ) no-repeat left center; padding: 10px 0 10px 40px; }

Which would give you a lovely little PDF icon next to every link that links to a PDF. Quite helpful!

What I didn't realise, is that I've actually seen the documentation for that type of style hundreds of times before, but never really understood what this meant:


Apart from my childhood

It's like CSS science, I love it, E being the Element, foo being the attribute, $ being the type of selection you want to make and finally, bar in this case is the thing that foo$ ends with.

But It doesn't always have to END with bar, if you dig a little deeper, you'll find that you've got these suckers to play around with too!

E[foo='bar'], E[foo$='bar'], E[foo^=bar], and E[foo*='bar']

For those, remember this rule:

No Symbol means it's exact

^ means Starts with

$ means Ends with

* means contains it somewhere

I'll be having fun with this tomorrow!