Inheritance in CSS as in OOP?

Question

does anybody know a way or a tool how inheritance can be used in CSS independent of the structure of the elements? Example:

.bg_red {
  background: red; 
}

.bold {
  font-weight: bold;
}

.bg_red_and_bold {
  //this class should inherit all the properties of the above two classes
}

I hope it is clear what I mean...

Thanks

Sunyatasattva · Accepted Answer · 2013-04-07 13:13:17Z

6

There is no way you can do that in CSS, but since you are looking for tools as well, you might look into CSS preprocessing:

LESS
SASS

Their mixin and @extend features should do what you are looking for.

answered Apr 7, 2013 at 13:13

Sunyatasattva

5,8903 gold badges30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ejaz · Accepted Answer · 2013-04-07 13:13:35Z

4

ability to add multiple classes to element is there for exactly that reason.

<div class="bg_red bold">The red and bold text</div>

answered Apr 7, 2013 at 13:13

Ejaz

8,8723 gold badges38 silver badges52 bronze badges

Comments

MarcinJuraszek · Accepted Answer · 2013-04-07 13:11:25Z

2

There is no such thing in CSS. Only thing you can do is:

.bg_red, .bg_red_and_bold  {
  background: red; 
}

.bold, .bg_red_and_bold  {
  font-weight: bold;
}

answered Apr 7, 2013 at 13:11

MarcinJuraszek

126k15 gold badges199 silver badges267 bronze badges

Comments

SLaks · Accepted Answer · 2013-04-07 13:12:35Z

2

CSS does not support this.

Consider using LESS, which compiles to CSS and supports mixins:

.bg_red_and_bold {
   .bg_red();
   .bold();
}

answered Apr 7, 2013 at 13:12

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

Steve Wellens · Accepted Answer · 2013-04-07 13:14:17Z

0

Probably not what you want but there is aggregation:

<div class="bg_red bold"...

The div will "inherit" characteristics of both styles.

answered Apr 7, 2013 at 13:14

Steve Wellens

20.6k2 gold badges31 silver badges70 bronze badges

Collectives™ on Stack Overflow

Inheritance in CSS as in OOP?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related