0

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;
}
3uk Mat
  • 43
  • 3

2 Answers2

1

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

<div class="base">
   I am a div
</div>

<div class="base white">
   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!

Patrick Cerny
  • 191
  • 2
  • 8
0

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

<div class="firstText">Text</div>
<div class="secodText">Text</div>

.firstText, .secondText{
color: black;
     :
     :
     :
}

.secondText{
color: white !important;
}

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

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

for more info check: Can a CSS class inherit one or more other classes?

Bjop
  • 330
  • 4
  • 19