Question

Alright, so I recently found this script called “Selectivizr” and I was really excited, but I plugged it into my project, set it up just as it said, and it didn’t work.

So, what I am looking for is any sort of JavaScript library/script that will allow me to use CSS3 selectors (especially :checked) in IE8.

Selectivizr seems broken, and hasn’t been updated in over a year. Has anybody else had luck with it?

Does anybody know of any other scripts that will allow for use of CSS3 selectors in IE8?

Not looking for CSS3 stylings like border radius, shadows, etc. Just looking for the selectors, like :before, :after, :checked, etc…

Answer 1

With jQuery code, you can use these few lines to toggle a class on all your checkboxes (or on it’s container) any time it’s checked or unchecked. This then lets you use regular CSS code in all browsers.

$("input[type='checkbox']").click(function() {
    $(this).parent().toggleClass("checked", this.checked);
});​

Working example here: http://jsfiddle.net/jfriend00/7jA5r/.

If you dynamically create checkboxes, then you could use the dynamic form of .on() to make sure to catch them.

I would personally rather use a solution with a few lines of code like this than use a heavy library that tries to add CSS style file capabilities. If you were going to use that, make sure you understand what’s really going on under the covers before you adopt it.

---

If you just wanted a selector libraryby itself, the Sizzle selector library works across a wide variety of browsers including all the way back to IE6. It will adapt to the capabilities of the host browser, using as many built-in capabilities as are present and using it’s own code when the host browser does not support an explicit capability.

You can use just the selector library itself from here or it is also the selector library inside of jQuery.

It’s extremely simple to use. You just do something like this:

var items = Sizzle(":checked");

and you will have an array of DOM elements that match the selector.