Geek Answers Handbook

Inherit from another class

How can one class be inherited from another in a CSS file?

input.btn { border:1px solid #23458c; background:url('gfx/layout.btn_bg.png'); color:#f0f5fa; font-weight:bold; margin-right:6px; padding:1px 6px 2px 6px; cursor:pointer; } input.btn_light { border:1px solid #717b8f; background:url('gfx/layout.btn_light_bg.png'); }

here I want input.btn_light inherit from input.btn .. how can this be done in the CSS file?

@vadiklk

 input.btn { border:1px solid #23458c; background:url('gfx/layout.btn_bg.png'); color:#f0f5fa; font-weight:bold; margin-right:6px; padding:3px 6px 4px 6px; cursor:pointer; } input.btn_light { input.btn; border:1px solid #717b8f; background:url('gfx/layout.btn_light_bg.png'); }
+7
source share
4 answers

Give the HTML element both classes:

 <input type="submit" class="btn btn_light" value="Action" />
+13
source

According to: http://dorward.me.uk/www/css/inheritance/ this is impossible and necessary.

+3
source

As an alternative to the accepted answer, you can also do the following with your CSS. The difference is that instead of using multiple class names where it will be used, this method uses several class names in CSS to say "use this style and this style." Then the link (enter button in this case) uses only one class name.

In the end, it does the same thing as the accepted answer.

Note. I changed the meaning of the borders because I wanted to use values ​​that were less subtle for the fragment.

 input.btn, input.btn_light { border: 2px solid red; background: url('gfx/layout.btn_bg.png'); color: black; font-weight: bold; margin-right: 6px; padding: 1px 6px 2px 6px; cursor: pointer; } input.btn_light { border: 2px solid green; background: url('gfx/layout.btn_light_bg.png'); } 
 <body> <input type="button" class="btn" value="Regular"> <br> <input type="button" class="btn_light" value="Light"> </body>
+1
source

SCSS / SASS example:

HTML

 <h1><span class='section-title'>Some heading!</span></h1> <h2><span class='section-title'>Some heading!</span></h2> <h3><span class='section-title'>Some heading!</span></h3> <h4><span class='section-title'>Some heading!</span></h4> <h5><span class='section-title'>Some heading!</span></h5> <h6><span class='section-title'>Some heading!</span></h6>

SCSS

 // This will style every .section-title element within // a heading the same as the heading. .section-title { h1 & { @extend h1; } h2 & { @extend h2; } h3 & { @extend h3; } h4 & { @extend h4; } h5 & { @extend h5; } h6 & { @extend h6; } }
0
source

More articles:


All Articles