CSS grouping and subgrouping

Question

Is it possible to apply style to all class X only if it's of class A, B or C without code duplication?

I understand grouping:

A, B, C {
   ...
}

But I want something like:

X, (A, B, C) {
   ...
}

How can I achieve this without duplicating code?

Answer 1

Couldn't you do this?

.X.A, .X.B, .X.C {
 /* rules */
}

That will match elements with both class X and A, or X and B, or X and C. Or did I misunderstand your question?

Answer 2

Sorry, I wanted to comment on Marc W's answer, but I guess I don't have enough reputation points to do so >=O

Please note that using multiple classes in a selector, like

.X.A, .X.B, .X.C {
 /* rules */
}

Isn't supported by IE6.

Answer 3

I'm modifying BluePrintCSS to accommodate our needs. Not quite the same as what you're doing, but there is a need to constantly apply styles to bunches of classes or IDs at once just as you are doing.

I've found that it's quicker to built a 'generator' in Javascript and then use that to spit out all the repetitive CSS declarations via nested for loops and such.

The advantage is that when the framework is updated, I can make some tweaks to my script and quickly update my 'over-ride' styles.