Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8

CSS3 selectors for IE

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

DOWNLOAD ^{v1.0.2 - (4k .ZIP archive)}

Enhancing IE's selector engine

Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers native selector implementations.
JavaScript-knowledge: none

Selectivizr works automatically so you don't need any JavaScript knowledge to use it — you won't even have to modify your style sheets. Just start writing CSS3 selectors and they will work in IE.
Works with existing tools

Selectivizr requires a JavaScript library to work. If your website already uses one of the 7 supported libraries you just need to add the selectivizr script to your pages. If not, you will need to pick a library too.

How does it work?

Just include this script in your page's <head> tag. If you're not already using a JavaScript library, you'll need to choose one from the table below.


					<script type="text/javascript" src="[JS library]"></script>

					<!--[if (gte IE 6)&(lte IE 8)]>

						  <script type="text/javascript" src="selectivizr.js"></script>

						  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>

					<![endif]-->

A table of JavaScript libraries that are compatible with selectivizr and CSS selector support they offer.
† = only available in IE8 standards mode.
	^{1.3 / 1.4}	^1.5.0	^1.6.1	^2.8.0	^2.8.0	^1.3	^1.2.3
[attr]	Yes	Yes	Yes	Yes	Yes	Yes	Yes
[attr=]	Yes	Yes	Yes	Yes	Yes	Yes	Yes
[attr~=]	Yes	Yes	Yes	Yes	Yes	Yes	Yes
[attr\|=]	Yes	Yes	Yes	Yes	Yes	Yes	Yes
[attr^=]	Fails to identify [attr^=""]	Fails to identify [attr^=""]	Fails to identify [attr^=""]	Yes	Fails to identify [attr^=""]	Yes	Yes
[attr$=]	Fails to identify [attr$=""]	Fails to identify [attr$=""]	Fails to identify [attr$=""]	Yes	Fails to identify [attr^=""]	Yes	Yes
[attr*=]	Fails to identify [attr*=""]	Fails to identify [attr*=""]	Fails to identify [attr*=""]	Yes	Fails to identify [attr*=""]	Yes	Yes
:nth-child	Yes	Yes	Yes	Yes	Yes	Yes	Yes
:nth-last-child	Selector not supported	Selects incorrect elements	Yes	Yes	Yes	Yes	Yes
:nth-of-type	Selector not supported	Selects incorrect elements	Yes	Yes	Yes	Yes	Yes
:nth-last-of-type	Selector not supported	Selects incorrect elements	Yes	Yes	Yes	Yes	Yes
:first-child	Yes	Yes	Yes	Yes	Yes	Yes	Yes
:last-child	Yes	Yes	Yes	Yes	Yes	Yes	Yes
:only-child	Yes	Yes	Yes	Yes	Yes	Yes	Yes
:first-of-type	Selector not supported	Selects incorrect elements	Yes	Selects incorrect elements	Yes	Yes	Yes
:last-of-type	Selector not supported	Selects incorrect elements	Yes	Selects incorrect elements	Yes	Yes	Yes
:only-of-type	Selector not supported	Selects incorrect elements	Yes	Selects incorrect elements	Yes	Yes	Yes
:empty	Fails if element contains a HTML comment	Yes	Fails if element contains a HTML comment	Fails if element contains a HTML comment	Fails if element contains a HTML comment	Yes	Yes
:enabled	Yes	Yes	Yes	Yes	Yes	Yes	Yes
:disabled	Yes	Yes	Yes	Yes	Yes	Yes	Yes
:checked	Yes	Yes	Yes	Yes	Yes	Yes	Yes
:hover	Yes	Yes	Yes	Yes	Yes	Yes	Yes
:focus	Yes	Yes	Yes	Yes	Yes	Yes	Yes
:target †	Yes	Yes	Yes	Yes	Yes	Yes	Yes
:not	Yes	Yes	Yes	Yes	Yes	Yes	Yes
:root	Selector not supported	Selector not supported	Selector not supported	Yes	Selector not supported	Yes	Yes
::first-line	Yes	Yes	Yes	Yes	Yes	Yes	Yes
::first-letter	Yes	Yes	Yes	Yes	Yes	Yes	Yes
	website	website	website	website	website	website	website

You need to know

selectivizr was written to make using CSS3 selectors in Internet Explorer completely seamless, but as with many JavaScript solutions to browser shortcomings, there are a few caveats and limitations you need to be aware of…

Selectivizr will automatically detect the best JavaScript library for the job. If you're already using a library and it doesn't support the selectors you need - just include another one.
Style sheets MUST be added to the page using a <link> tag but you can still use @import in your style sheets. Styles defined in <style> tags won't be parsed.
Style sheets MUST be hosted on the same domain as the page due to browser security restrictions. Likewise, style sheets loaded using the file: protocol will not work.
The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won't be reflected.
If JavaScript isn't available, you can include a fallback style sheet. Just add it to the <noscript> tag as shown in the code sample.
For Selectivizr to work IE must be running in standards mode — so make sure you have a DTD at the top of your pages.

Enhancing IE's selector engine

JavaScript-knowledge: none

Works with existing tools