Using the ">" selector with IE6

Question

I have written some CSS which targets elements using the parent > child selector. Specifically for tables so I can apply certain styles to the headers and footers like this

table > thead > tr > th ...
table > tbody > tr > td ...
//there are other uses in the css as well

This works great, except in IE6. What is my best approach for unfactoring this css to support IE6?

Answer 1

You could target them using JavaScript, but that hardly is a real solution since it would require javaScript for something that should be done by CSS. You could also modify your HTML to have specific classes, but that means modifying you HTML. I don't really think there are any 'nice' solutions, I would probably hack it all together using JavaScript if it was me who had to take care of this, or if I had acces to the HTML or HTML creating script use classes for those specific children.

Answer 2

Usually you can just remove the '>' and it will work. It's a matter of how your CSS and HTML is written. I'd give it a shot.

Answer 3

If I want to select E > F, I use

E F {
    set-some-style: value;
}

E * F {
    unset-some-style: 0;
}

Only, that doesn't work quite as well when you have lots of > selectors.

More reading: http://www.sitepoint.com/blogs/2005/06/20/erics-universal-child-selector/