Hey guys, is there an easier way to do this?
div p span.class1, div p span.class2 {
}
Like is there an easier way to combine multiple classes in a container? For instance:
div p span.class1|class2 {
}
Thanks
This question raises over and over again 
No, there isn’t any. CSS selectors have a weight consisting from those very elements: div, p, span, .class1. That weight plays the deciding factor in applying styles.
Removing that weight (cutting the selector short) means discarding the very core, the way CSS targets elements.
Depending on the case, you may find ways (CSS ways), but, as a general rule, no, there is no “easy” way. The strongest argument is the wrong way beginners try to accomplish what you’re looking for:
div p span.class1, span.class2 {
}
Not necessarily. You could set up so that the shortcut would be unambiguously parsed to spell out the full cascade. For example, you could have
div p (.span1|.span2) {…} meaning the same as
div p .span1, div p .span 2 {…}
It’s starting to look like an interesting thread this one
Stevie! Thanks that is exactly what I need! Is that CSS2 or CSS3? Also will it work in most browsers?
It’s nothing … it was a suggestion as to how you could make that specification without needing to repeat the entire chain of selectors, but as far as I’m aware, nothing along those lines has ever appeared in any CSS draft.
Sorry (:
Yes like this
.class1,.class2 {
font-weight:bold;
}
Keep the path names as short as possible and only elongate where specificity is an issue. The div and the p selectors seem like a waste of space in the above and I doubt they are there for specificity issues anyway.
Although you can change the properties a class applies by its context (e.g. div .class1 {something…} or p .class1{something else…} ) there rarely is a need to do this as you could simply use another unambiguous class instead and keep things simple.
In most cases the more concise the code and the less unambiguous the rules the easier it is to maintain.
I realise your example may have been a contrived example to ask a question but thought it worth pointing out anyway
Comma separated selectors are just a way of applying a group of rules to various (unrelated) selectors. There is no way to shorten it further or make it conditional with css alone (there are programmable solutions although I’ve never found the need to use them).