Is the CSS class chain this way valid?

Question

For a while I relied on the following technique. But I did not often come across this, and I could not find information about this. Perhaps he has his own name, which I do not know about? I call it chaining because it looks like this: whole CSS class names together. But doing a chain search provides most of the information about jQuery.

.button {
   background-color:#ccc;
}
/* This is what I'm unsure of, notice there is no space between .button and .on */
/* If there were, .on apply to the child of .button, but that not my intention */
.button.on { 
   background-color:#fff;
}

This allows me to use the same class name (on) to distinguish between the states of several elements.

<a class="button"></a>
<a class="button on"></a>
<a class="button-two"></a>
<a class="button-two on"></a>
<!-- etc... -->

This is very convenient with dynamic pages when you need to switch a class onto several elements using the same class name.

But is it really?

Answer 1

CSS. IE6 IE7 .

Answer 2

, CSS, IE6 - , . CSS-Tricks.com .

Answer 3

This is absolutely true and very common.

You can see it on this very page:

a.comment-user.owner {
    padding: 2px 5px;
}

However, IE6 will ignore everyone except the last class.
In IE6 is .a.bequivalent .b.