Is it possible to combine classes in CSS?

Question

Suppose I have a en element <div clas="foo bar foobar">[stuff]</div> and I want to replace these three classes with one class (SuperFoo).

While I could find out how foo, bar and foobar are defined, and use each of those elements:

.SuperFoo { color : red } and so on, is it possible to define SuperFoo in terms of foo, bar and foobar?

.SuperFoo { foo bar foobar}?

How can I do this?

Answer 1

Unless you use LESS or SASS's 'mixin' features, there's no real way in plain CSS to "inherit" other classes.

The best you can do is apply all three classes to your DOM element.

If your problem is that you have a ton of those classes already on a page and you want to add properties to all of them, you can do:

.foo, .bar, .foobar {
    color: red;
}

and that will apply color: red to any element that has .foo or .bar or .foobar.

Answer 2

No. But you could use chained classes:

.foo.bar.foobar {
    color: red;
}

<div class="foo bar foobar">[red]</div>