48

I have one base .base{} in my CSS file with couple properties. I want to change only color and other properties to stay same. How to inherit this base class inother classes ?

Damir
  • 54,277
  • 94
  • 246
  • 365
  • 2
    see this question: http://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes – Shaheer Oct 20 '12 at 12:10

9 Answers9

94

CSS "classes" are not OOP "classes". The inheritance works the other way around.
A DOM element can have many classes, either directly or inherited or otherwise associated, which will all be applied in order, overriding earlier defined properties:

<div class="foo bar">

.foo {
    color: blue;
    width: 200px;
}

.bar {
    color: red;
}

The div will be 200px wide and have the color red.

You override properties of DOM elements with different classes, not properties of CSS classes. CSS "classes" are rulesets, the same way ids or tags can be used as rulesets.

Note that the order in which the classes are applied depends on the precedence and specificity of the selector, which is a complex enough topic in itself.

deceze
  • 510,633
  • 85
  • 743
  • 889
  • So lets say, you want to apply bootstrap 5.3 dynamic themes (colors are selected by user from 24 different css files) to Tabulator component for example. Since you can't apply class to html generated by tabulator, which changes by user interraction. Do you define every single class from tabulator into your theme? things become more complicated when you want to apply theme from jQuery UI to tabulator too! – AaA Aug 08 '23 at 03:08
58

As others have already mentioned, there is no concept of OOP inheritance in CSS. But, i have always used a work around for this.

Let's say i have two buttons, and except the background image URL, all other attributes are common. This is how i did it.

/*button specific attributes*/
.button1 {
    background-image: url("../Images/button1.gif");
}
/*button specific attributes*/
.button2 {
    background-image: url("../Images/button2.gif");
}

/*These are the shared attributes */
.button1, .button2 {
    cursor: pointer;
    background-repeat: no-repeat;
    width: 25px;
    height: 20px;
    border: 0;
}

Hope this helps somebody.

James Poulose
  • 3,569
  • 2
  • 34
  • 39
12

You can create another class with the properties you want and add this class to your class attribute:

.classA
{
  margin: 0;
  text-align: left;
}

.classB
{
  background-color: Gray;
  border: 1px solid black;
}

<div class="classA classB">My div</div>
Martijn
  • 24,441
  • 60
  • 174
  • 261
6

You dont inherit in css, you simply add another class to the element which overrides the values

.base{    
  color:green;
  ...other props
}

.basealt{
   color:red;
}

<span class="base basealt"></span>
redsquare
  • 78,161
  • 20
  • 151
  • 159
3

i think you can use more than one class in a tag

for example:

<div class="whatever base"></div>
<div class="whatever2 base"></div>

so when you want to chage all div's color you can just change the .base

...i dont know how to inherit in CSS

MangMang
  • 427
  • 1
  • 5
  • 17
  • As the others said before, inheritance doesn´t exists in CSS – Martijn Mar 24 '11 at 10:04
  • 2
    @Martijn I does, but not in the sense of OOP class inheritance. Inheritance is actually quite important in CSS, it's the reason every single element on the page is blue if you define `body { color: blue; }`. – deceze Mar 24 '11 at 10:07
  • If you state it that way, it exists, but it doesn´t in the way of classes: .sub-base .base {} (or whatever notation you want to use). – Martijn Mar 24 '11 at 10:17
2

As said in previous responses, their is no OOP-like inheritance in CSS. But if you want to reuse a rule-set to apply it to descentants of something, changing properties, and if you can use LESS, try Mixins. To resume on OOP features, it looks like composition.

For instance, you want to apply the .paragraph class which is in a file "text.less" to all p children of paragraphsContainer, and redefine the color property from red to black

text.less file 

.paragraph {
    font: arial;
    color: red
}

Do this in an alternativeText.less file 

@import (reference) 'text.less';    
div#paragraphsContainer > p {
    .paragraph;
    color: black
}

your.html file

<div id='paragraphsContainer'>
   <p>paragraph 1</p>
   <p>paragraph 2</p>
   <p>paragraph 3</p>
</div>

Please read this answer about defining same css property multiple times

groch
  • 3,326
  • 1
  • 21
  • 18
2

Something like this:

.base {
    width:100px;
}

div.child {
    background-color:red;
    color:blue;
}

.child {
    background-color:yellow;
}

<div class="base child">
    hello world
</div>

The background here will be red, as the css selector is more specific, as we've said it must belong to a div element too!

see it in action here: jsFiddle

firefox1986
  • 1,602
  • 11
  • 9
0

You could also use the !important feature of css to make qualities you do not want to override in the original class. I am using this on my site to keep some of the essential characteristics of the original class while overriding others:

<div class="foo bar">
.foo {
color: blue;
width: 200px  !important;
}

.bar {
color: red;
width: 400px;
}

This will generate a class "foo bar" element that is red and 200px. This is great if you are using the other two classes individually and just want a piece from each class.

Ryan Jarvis
  • 61
  • 9
0

You don't need to add extra two classes (button button-primary), you just use the child class (button-primary) with css and it will apply parent as well as child css class. Here is the link:

CSS-Inheritance

Thanks to Jacob Lichner!

Chirag
  • 1,683
  • 2
  • 17
  • 26