Is chaining CSS classes in such a way valid?

Question

I've been relying on the following technique for a while. But I've not come across it often, and I wasn't able to find information on it. Perhaps it has a proper name that I am not aware of? I call it chaining because it seems to be exactly that: chaining CSS class names together. But doing a search on chaining yields info on jQuery for the most part.

.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's not my intention */
.button.on { 
   background-color:#fff;
}

It allows me to use a single class name (on) to differentiate between the states of multiple elements.

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

It's very handy with dynamic pages when you need to toggle an on class on several elements using a single class name.

But is it valid?

Answer 1

This is perfectly valid CSS.... Although IE6/and IE7 do have some issues with class-chaining.

Answer 2

Yes, it is valid CSS, although it doesn't work quite right in IE6 - it will only apply the last class, rather than all of them. You can read more over at CSS-Tricks.com on the topic.