CODEWITHSUNDEEP
cssinternet-explorer-6
Bob
Bob

Reputation: 99694

Using the ">" selector with IE6

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?

Upvotes: 0

Views: 472

Answers (4)

Spudley
Spudley

Reputation: 168655

IE6 does not support the > selector.

In some cases, you can replace it with a space selector instead and achieve much the same result, but this doesn't always work; there are times when you simply need the >.

My first advice would be to drop support for IE6. It has lost virtually all its remaining market share over the last couple of years, so there's really no need to support it.

If you must support IE6, and you want to use the > selector, then your only options are Javascript hacks.

There are two hacks which might help you:

  • Dean Edwards' IE7.js - this is an attempt to use Javascript to back-port as many CSS and JS features as possible into older versions of IE, including IE6. It does a fairly good job, and has been around for ages.

  • Selectivizr - this is a JS library aimed at giving older versions of IE full support for modern CSS selectors. It requires you to also be using another library such as jQuery, as it hooks into the selector engine from that library. This means that if you're already using one of the supported libraries, then it's a small and efficient addition to your code.

Upvotes: 1

davethegr8
davethegr8

Reputation: 11595

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/

Upvotes: 5

Ryan Doherty
Ryan Doherty

Reputation: 38740

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.

Upvotes: 3

Pim Jager
Pim Jager

Reputation: 32119

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.

Upvotes: 0

Related Questions