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-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.

Possible duplicate of [Can a CSS class inherit one or more other classes?](https://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes) — Organic Advocate, Sep 21 '17 at 21:45

score 32 · Accepted Answer · answered Jun 14 '10 at 12:35

32

You can use selector grouping:

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

answered Jun 14 '10 at 12:35

ChrisW

53,487
12
110
213

6

This isn't really an answer. This is more of a "No, but you can do this instead, which may or may not be what you were looking for". – user9057586 Apr 12 '21 at 21:15
"I just want the .list li style to be whatever I define for the .foo class." – ChrisW Apr 13 '21 at 04:57

RoToRa · Answer 2 · 2010-06-14T14:28:45.987

15

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.

edited Jun 14 '10 at 14:28

answered Jun 14 '10 at 12:37

RoToRa

36,594
12
66
103

Quentin · Answer 3 · 2010-06-14T13:37:42.473

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.

edited Jun 14 '10 at 13:37

answered Jun 14 '10 at 12:38

Quentin

857,932
118
1,152
1,264

Ghost Echo · Answer 4 · 2017-05-10T13:34:04.640

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

edited May 10 '17 at 13:34

answered Jul 09 '14 at 18:35

Ghost Echo

1,917
4
32
46

score 2 · Answer 5 · answered Jun 14 '10 at 12:32

2

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

answered Jun 14 '10 at 12:32

Lars Mæhlum

6,004
3
25
32

score 2 · Answer 6 · answered Jun 14 '10 at 12:36

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.

score 2 · Answer 7 · edited Sep 22 '18 at 19:30

2

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"

edited Sep 22 '18 at 19:30

Mad Physicist

95,415
23
151
231

answered Jun 14 '10 at 12:37

Salil

45,112
20
117
151

score 2 · Answer 8 · answered May 05 '19 at 18:19

2

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')

answered May 05 '19 at 18:19

Frank Carnovale

408
4
6

This solution doesn't override already defined classes. Some fix available: https://stackoverflow.com/questions/5394366/does-addclass-in-jquery-override-any-existing-css-class-based-styles But unfortunately it leads to big css changes in my case... – Grigory Kislin Oct 16 '19 at 12:17

score 0 · Answer 9 · answered Feb 18 '18 at 07:42

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>

score 0 · Answer 10 · answered Oct 18 '19 at 19:34

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?

Point one style class to another?

10 Answers10

Linked