selectivizr - CSS3 selectors for Internet Explorer

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)

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.
jQuery 1.3 / 1.4 Dojo 1.5.0 Prototype 1.6.1 YUI 2.8.0 DOMAssistant 2.8.0 MooTools 1.3 NWMatcher 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

Who's using it?

Selectivizr is adding advanced CSS selector support to a vast range of websites, from e-commerce projects including Hewlett-Packard's MagCloud, social media websites such as AudioBoo and Tweetment to personal portfolios and blogs — and everything in between.

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…