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 31 · Accepted Answer · answered Jun 14 '10 at 12:35

31

You can use selector grouping:

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

answered Jun 14 '10 at 12:35

ChrisW

54,973
13
116
224

12

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

17

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

37,635
12
69
105

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

6

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,997
4
31
46

Quentin · Answer 4 · 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

914,110
126
1,211
1,335

score 3 · Answer 5 · edited Sep 22 '18 at 19:30

3

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

107,652
25
181
264

answered Jun 14 '10 at 12:37

Salil

46,566
21
122
156

score 2 · Answer 6 · 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,074
3
28
32

score 2 · Answer 7 · 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 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

458
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?

score 0 · Answer 11 · answered May 14 '23 at 17:28

I am struggling with the same. everything is object oriented, but CSS is not: it would be so nice to have 3 containers (A/B/C) define borders/background/hover properties and to have another 3 containers (X/Y/Z) define text properties (color,font,size,weight) Then you could assign your HTML containers just IDs/or Classes if they are always the same (E/F/G)

Now you'd define .E{ .A .Z } .F{ .B .Z } .G{ .C .Y }

the very reasons why this is NOT possible and now one can "manage" hierarchies (cascades) is the reason why so many pages have 10s of thousands of lines of CSS code. If one could "inherit" other ids/classes in a CSS definition this could greatly be reduced.

One would simply define the structure (layout) in HTML and CSS.

the worst way to do it I have found in ServiceNow: They use CSS variables, elements are not documented, you need to figure out yourself. Each element has 3 Ifs...

Point one style class to another?

11 Answers11

Linked