Internet Explorer 6, 7 both do NOT support CSS class-chaining as a couple of articles floating around on the internet say. Basically, CSS class-chaining is used to select HTML elements which have multiple CSS classes:
For example:
1 2 3 4 5 | <!-- single class --><div class="cls3">Single</div><!-- multiple classes --><div class="cls1 cls2 cls3">Multiple</div> |
To select the later element we can use CSS class-chaining like:
1 2 3 | .cls1.cls2.cls3 { /* your style */} |
However, IE6, 7, will see this as
1 2 | .cls3 {} |
because .cls3 is placed last in the chain .cls1.cls2.cls3
This selector .cls3 apparently applies to both the first and second HTML elements.
A workaround to this IE bug is using parent-child CSS selector by adding additional child elements:
1 2 3 4 5 6 7 | <div class="cls1 cls2 cls3">Multiple</div><!-- now becomes --><div class="cls1"> <div class="cls2"> <div class="cls3">Multiple</div> </div></div> |
And now we can select this element by
1 2 3 | .cls1 .cls2 .cls3 { /* your style */} |
which is fully supported by IE 6+.
Cheers,
Totti