Use double classes in IE6 CSS?

Question

is there any way to make IE6 understand double classes, say I have a class MenuButton with a color class and possibly a clicked class; like :

.LeftContent a.Menu         


        

Answer 1

Dean Edwards' IE7 script adds multiple class support for IE6. See http://code.google.com/p/ie7-js/

Answer 2

If I use (like I wrote in the question), tag-specific rules, like .LeftContent a.MenuButton.Orange, it works...

It only matches them if the classes in the selector are in the same order as the classes on the element.

This isn't quite true. IE6 (and IE7 in Quirks Mode) only remembers one class per selector-part. If you write two, the second one overrides the first. So ‘a.MenuButton.Orange’ is identical in effect to ‘a.Orange’.

So multiple class selectors do still have to be avoided for now.

Answer 3

IE6 doesn't support multiple class selectors. The reason you see a change with the Orange class is because a.MenuButton.Orange is interpreted by IE6 as a.Orange.

I recommend structuring your markup in such a way that you can work around this:

<div class="leftcontent">
   <ul class="navmenu">
     <li><a class="menubutton orange" href="#">One</a></li>
     <li><a class="menubutton orange clicked" href="#">Two</a></li>
   </ul>
</div>

By grouping by a more specific ancestor you can create variation with classes scoped by that ancestor (in this example navmenu):

.leftcontent .navmenu a { /* ... basic styles ... */ }
.leftcontent .navmenu a.orange { /* ... extra orange ... */ }
.leftcontent .navmenu a.clicked { /* ... bold text ... */ }

It's not as good as multiple classes, but I've used it to work around the lack of support in IE.