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 开发者_JS百科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;
}

---

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"

---

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.

---

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?