September 3, 2010

selectivizr: JavaScript-based CSS3 selectors for IE

   |   Related thoughts:

Just came across this JavaScript solution to CSS3 support in IE: selectivizr. While it doesn’t add support for fun CSS3 properties like rounded corners, it does provide access to the many supremely useful CSS3 selectors like attribute selectors, nth-child selectors, and the :not selector.

For example, this attribute selector is wonderful:
a[href^='http://']
It select all links that begin with http://. This selector doesn’t work in IE 6 (it does work in IE7 and up.)

The nth-child selector is a great way to tiger-stripe rows in a table
tr:nth-child(odd) { background-color: #ff3344; }
This isn’t currently supported by IE, but will be supported by IE9.

And the :not selector lets you exclude elements from a selection:
p:not('.copyright')
Again you won’t find support for this in IE until version 9 comes out.
This selector would apply to all p tags that don’t have the class of “copyright”.