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

Answer 1

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.

Answer 2

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

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

Answer 3

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

Answer 4

CSS does not support this.

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

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

Answer 5

Probably not what you want but there is aggregation:

<div class="bg_red bold"... 

The div will "inherit" characteristics of both styles.