CODEWITHSUNDEEP
css
clarkk
clarkk

Reputation: 27689

inherit from another class

how is it possible to make one class inherit from another in the 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 to inherit from input.btn.. how is that possible to do 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');
}

Upvotes: 8

Views: 26933

Answers (4)

Jim
Jim

Reputation: 2146

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

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

Note: I changed the value of the borders because I wanted to use values that were less subtle for the snippet.

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>

Upvotes: 2

Patrick Berkeley
Patrick Berkeley

Reputation: 2286

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

Upvotes: 0

L. Rother
L. Rother

Reputation: 41

According to: http://dorward.me.uk/www/css/inheritance/ it is not possible and needed.

Upvotes: 3

roryf
roryf

Reputation: 30160

Give the HTML element both classes:

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

Upvotes: 15

Related Questions