IE and CSS class-chaining

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:

<!-- 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:

.cls1.cls2.cls3 {
    /* your style */
}

However, IE6, 7, will see this as

.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:

<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

.cls1 .cls2 .cls3 {
    /* your style */
}

which is fully supported by IE 6+.

Cheers,

Totti