Point one style class to another?

Question

Hi,

I have a css class like:

.foo {
  background-color: red;
}

then I have a class specified for a list:

.list1 li {
  background-color: tan;
}

is it possible to set one style class to just point to another? Something like:

.list1 li {
  .foo;
}

not sure how to articulate that - I just want the .list li style to be whatever I define for the .foo class.

Thanks

Answer 1

Inheritance is, as far as I know, not supported in CSS (2.1 at least)

Answer 2

You can use selector grouping:

.foo, .list1 li { 
  background-color: red; 
} 

Answer 3

Afaik, this isn't possible (yet) I hope it will be in the future. I always just copy+paste whatever I want to be the same into the desired selector or put the selector names one after another:

.foo,
.li,
.whatever
{styles}

Maybe someone else has another suggestion.

Answer 4

No you can't but you override it using naming differnt classes for example

.foo { background-color: red; }

.list1 li { background-color: tan; }

class ="list1 foo"

Answer 5

No. The best you can do with "native CSS" is to use a multiple selector:

.foo, .list1 li {
   ...
}

Otherwise there are preprocessors that can help with this such as SASS.

Answer 6

Not with any syntax like that (and don't confuse a "class" (an HTML term) with a "class selector" or a "rule-set").

Your options are multiple classes, grouping selectors or preprocessing.