Css Identical classes differ in one parameter, how to solve-CodePudding

I have a class mainText, it stores the settings for the font, its size, color, etc. In the first block, everything suits me, but in the second block, all the parameters are repeated, but the color is different. What is the right thing to do in this situation? Create a new class and duplicate all properties in it? Use style on every element of the second block? I don't understand why classes can't be inherited in css like

.secondText : mainText{
color: white;
}

CodePudding user response：

Normally, you would give both elements the same base class and your second item the additional class:

<div >
   I am a div
</div>

<div >
   I am a div, but white
</div>

For the css part

.base {
//base config
}

.white {
   color: white;
}

There is no explicit class inheritance in css, yet you could look into mixins in scss or scss overall, because it provides some features css does not have. Hope this could help!

CodePudding user response：

you could use the smame one and add a second class to change the color with high priority.

.firstText : mainText{
color: black;
     :
     :
     :
}

.secondText : mainText{
color: white !important;
}

or you could place the css in the HTML code. for example:

<span  style="color: white;">Text</span>