Use double classes in IE6 CSS?

Question

Hi, 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.MenuButton {..general rules..}
.LeftContent a.MenuButton.Orange {..sets background-image..}
.LeftContent a.MenuButton.Clicked {...hum ta dum...}

Now, IE6 understands <a class="MenuButton Orange">, but when adding Clicked, like <a class="MenuButton Orange Clicked">, IE just ignores the Clicked rule.

Of course, I could rewrite my CSS, and have own rules for .MenuButtonOrange
and such (and it'd probably taken a lot shorter time than asking this question ;-),
but golly, it just so unappealing and Web 0.9...

Cheers!

Answer 1

Seems I was a bit quick,
just saw that this just happens if i use
.LeftContent .MenuButton.Orange{} and such.
If I use (like I wrote in the question), tag-specific rules,
like .LeftContent a.MenuButton.Orange, it works...

Answer 2

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.

Answer 3

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 4

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