Point one style class to another?

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.

You can use selector grouping:

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

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.

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.

You might want to look into a CSS preprocessor such as SASS or LESS. You can define variables that can be used throughout your code. It greatly speeds up your coding when you're familiar with it.

http://sass-lang.com/

http://lesscss.org/

Using SASS:

$darkred : #841c14;
.box { 
    background: $darkred;
}

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

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.

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"

The above solutions aren't available if you don't have control over how 'foo' was defined.

So, if a JQuery solution is acceptable, just apply the original class to all instances of the new class/context. In this case:

$('.list li').addClass('foo')

to help clarify what is meant by overriding, if you want .list1 li to carry all the styles of foo, but just want to change it's color to tan, i would do this:

<span class = "foo">
  <span class = "list1"><!--or whatever name you have for your new style-->
    TEXT WITH INHERITED STYLE GOES HERE
  </span>
</span>

I've a litte expand @Frank Carnovale solution (without css changing). After page loading:

$(function () {
   $('.list li').removeClass('old1 old2 ...')
   $('.list li').toggleClass('foo1 foo2 ...')
}

See also Does addClass in JQuery override any existing css class based styles?