Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won't be on a cool new browser.

Internet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It's a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.

The inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we're using IE conditional statements to determine the browser version and if it's less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.

[code language="html"]
&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;
&lt;!--[if lt IE 9]&gt;
	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;
	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;
&lt;![endif]--&gt; 	
&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; 
[/code]

Once included, you're now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:

[code language="css"]
#container p:nth-child(odd) { color: #ff0000; }
[/code]

and it will render correctly in Internet Explorer versions 6-8. 

<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>
<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>

In order to have done this previously, I would've have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery's nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.

The main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that's pretty good coverage.

