CODEWITHSUNDEEP
htmlcssweb
3uk Mat
3uk Mat

Reputation: 43

Css Identical classes differ in one parameter, how to solve

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

Upvotes: 0

Views: 400

Answers (2)

Bjop
Bjop

Reputation: 336

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?

Upvotes: 0

Patrick Cerny
Patrick Cerny

Reputation: 478

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!

Upvotes: 2

Related Questions