How to inherit main part of a class , but change some value (css)

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



How to inherit main part of a class , but change some value (css)


.headerValueStyle1
font-weight: 700;
font-size: 1.3rem;
color: #575f7a;
text-align: left;
width: 8%;



I have this class for example .. I want to inherit all properties from this class, but only change width (make it for example 10%). How to make it? I can copy it 2 times and change it .. but I think it isn't a good way.





simply use the class and another class to override the width
– Temani Afif
Aug 8 at 18:42





make new classes inside headerValueStyle1, but only add there width?
– Andrey Radkevich
Aug 8 at 18:46





no I mean use that class and another one for the width .. basically like the answer provided actually
– Temani Afif
Aug 8 at 18:48





Thanks for your time) Helpful
– Andrey Radkevich
Aug 8 at 18:49




2 Answers
2



You can apply multiple classes to html elements, e.g. <span class="headerValue width8">, this will then use both .headerValue and .width8


<span class="headerValue width8">



In combination with a css style sheet like


.headerValue
font-weight: 700;
font-size: 1.3rem;
color: #575f7a;
text-align: left;

.width8
width: 8%;

.width10
width: 10%;



you can achieve such "inheritance" (not actually inheritance but rather what I believe you're looking for)





Thanks for your reply. Good solving.
– Andrey Radkevich
Aug 8 at 18:49



Quick and dirty solution:


.headerValueStyle1,
.anotherClass
font-weight: 700;
font-size: 1.3rem;
color: #575f7a;
text-align: left;
width: 8%;

.anotherClass
width: 100%;



Just rewrite below property






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Dynamically update html content plain JS

How to determine optimal route across keyboard