Point one style class to another?

Question

I have a css class like:

.foo {
  background-color: red;
}

then I have a class specified for a list:

.list1 li {
  background-c         


        

Answer 1

You can use selector grouping:

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

Answer 2

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.

Answer 3

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?

Answer 4

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 5

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;
}

Answer 6

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>