Can CSS declarations with sub classes be applied to multiple classes using a comma?

Question

I currently have CSS classes that are different but are for elements that have children of the same class (ChildClass). I want to change the opacity of the child class when the parent classes are active. Right now I'm doing this with many CSS declarations (see example below). Can this be done with one declaration?

Current CSS

.class1 {
    ...elided...
}

.class2 {
    ...elided...
}

.class1:active .ChildClass {
    ...elided...
}

.class2:active .ChildClass {
    ...elided...
}

For both, the child class' change will be the same. Can I do something like this?

WHat I would like to do

.class1:active,class2:active .ChildClass {
    ...elided...
}

Will that work? What's the browser support for that?

Did you see this: http://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes — fred02138, Oct 23 '13 at 18:17
@cimmanon Yes, and it wasn't working correctly. The reason was explained by the below answers. — Don Rhummy, Oct 23 '13 at 18:22

score 2 · Accepted Answer · answered Oct 23 '13 at 18:18

No, you need to put FULL selector strings in each comma delimited section, so you'd want:

.class1:active .ChildClass, class2:active .ChildClass {
    ...elided...
}

The way you had it previously is targeting .class1:active and .class2:active .ChildClass rather than .ChildClass of each. Commas separate full selector strings, there is no abbreviation - which makes sense if you think about it because with a complex selector CSS would have no way of knowing where the abbreviation "shortcut" begins.

If you are interested in shorthand CSS or other ways to save time and finger energy when typing out complex selectors I recommend looking into SASS or another preprocessor (LESS, Stylus etc).

@DonRhummy Great! Mark it as the answer when you get a chance if you don't mind! Also check out my edit regarding CSS preprocessors. — Ennui, Oct 23 '13 at 18:22
Marked as the answer. (I would have marked it earlier but Stack requires an 8 minute wait) — Don Rhummy, Oct 23 '13 at 18:31

score 1 · Answer 2 · answered Oct 23 '13 at 18:19

Just comma separate all your declarations:

.class1, .class2, .class1:active .ChildClass, .class2:active .ChildClass {
    ...elided...
}

Your second example is not what you are looking for, as it is equivalent to:

.class1:active {
    ...elided...
}
class2:active .ChildClass {
    ...elided...
}

Can CSS declarations with sub classes be applied to multiple classes using a comma?

2 Answers2