[jquery] Implement + selector for IE6

Question

Hi,

I really like the + selector and don't want to add another css rule just for a IE6 workaround. So is there a jquery-way to check all existing css rules if it's using the + selector and to then modify the element.

Something like this:

if (IE6)
  for (var rule in $.cssrules)
    if (rule.selector.find('+'))
       $(rule).style = rule.style; // here the + selector works even for IE6 because jquery emulates it.

So the basic question is: can I get an array (or something else) of all css rules defined in the document?

Cheers, Manuel

Answer 1

If you apply the rule via a class, maybe you could inspect the attributes on a known element it should be applied to and see if it's been applied?

Answer 2

There is a way to do that. In fact, a JavaScript library called IE7 already does that and much more - it enables most CSS 3 selectors on Internet Explorer 6 and even 5: http://code.google.com/p/ie7-js/ .
I should say I haven't used it myself, but I've heard good thing about it.

Answer 3

What you could do is something like this:

Use your normal everything-but-IE6 CSS rule, but then also create another class with the same styles:

/* CSS */
.myNormal + .cssRule + strong,
.myOverrideClass {
    color: #f0f;
}

And then, using jQuery, apply the override class to the elements matched by your normal CSS selector:

$('.myNormal + .cssRule + strong').addClass('myOverrideClass');

Using this method, the only way someone won't get the styles is if they're on IE6 with Javascript disabled. Users without javascript on other browsers won't be affected.