" selector with IE6 I wrote some CSS that targets elements using the parent> child selector. Specifically for tables, so I can appl...">
Clever Geek Handbook

Using the ">" selector with IE6

I wrote some CSS that targets elements using the parent> child selector. Specifically for tables, so I can apply certain styles to 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 for IE6. What is my best approach for not using this CSS for IE6 support?

0


source to share


4 answers


Usually you can just remove the ">" and it will work. This is a question about how your CSS and HTML are written. I would shoot.



+3


source


If I want to select E> F I use

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

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


Only it doesn't work when you have a lot of selectors.

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

+5


source


IE6 does not support selector >

.

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

.

My first tip is to drop IE6 support. It has lost virtually all of its remaining market share over the past couple of years, so there is no need to maintain it.

If you must support IE6 and you want to use a selector >

, then your only options are Javascript hacks.

There are two hacks that can help you:

  • Dean Edwards' IE7.js is an attempt at using Javascript to back up as many CSS and JS features as possible in older versions of IE, including IE6. It does a pretty good job and has been around for ages.

  • Selectivizr is a JS library designed to provide legacy IE with full support for modern CSS selectors. This requires that you also use another library like jQuery as it intercepts the selection mechanism from that library. This means that if you are already using one of the supported libraries, then this is a small and effective addition to your code.

+1


source


You can target them with JavaScript, but this is hardly a real solution as it would require javaScript for something that needs to be done by CSS. You can also change your HTML to have specific classes, but that means changing the HTML. I really don't think there are any "good" solutions, I would probably hack it all together using JavaScript if it was someone who had to take care of it, or if I have access to HTML or HTML create script classes for these specific children.

0


source






More articles:


All Articles