CSS attribute selectors... in IE7!

A co-worker sent around an email regarding CSS Attribute Selectors. What was amazing in that email though is it said they worked in IE7!

For those that are not "in the know" (I so hate that saying) here's some information on CSS Attribute Selectors.

The most common CSS styles around will usually reference an XHTML element by the ID, Name or Class attributes. Attribute selectors allow you to apply CSS styles to any element based on any attribute... pretty cool eh?

To make things extremely clear... here is an example I found that makes more sense:

a[href$=".pdf"] {
background: url(pdf_icon.gif) no-repeat;
}

a[href$=".doc"] {
background: url(word_icon.gif) no-repeat;
}

This little bit of CSS will look for any <a /> tag with a .pdf or .doc in the href attribute and apply the appropriate CSS.  So for the example above, you will get a nice icon beside each anchor that links to a PDF or DOC.

Now that rocks!

Here are a few links that talk more on this:

http://academ.hvcc.edu/~kantopet/old/css/index.php?page=css+attr+selectors&parent=css+syntax

http://www.stuffandnonsense.co.uk/archives/css_a_tribute_to_selectors.html