CODEWITHSUNDEEP
cssinheritance
orochi
orochi

Reputation: 1258

How to make inheritence in CSS?

I have the following problem:

I have a font with a given style in a css class:

.font_arial_36 {
    font-family:Arial;
    font-size:36px;
}

And now I have a css that gives me the size of a div in a given situation:

.a_div_test {
    width:300px;
    max-width:350px;
}

I want the a_div_test to have the properties of the font_arial_36, like an inheritance.

Somethin like (this is wrong just posting what I wanted):

.font_arial_36 {
    font-family:Arial;
    font-size:36px;
}

.a_div_test extends font_arial_36 {
    width:300px;
    max-width:350px;
}

and now the .a_div_test should also have the font_arial_36 properties.

Is it possible with css?

PS: I do not want to add multiple classes to an Html Element like that:

<div class="font_arial_36 a_div_test"></div>

Because I should rewrite my code in many places where .a_div_test appear.

Upvotes: 1

Views: 121

Answers (5)

leuquim
leuquim

Reputation: 655

CSS stands for "Cascading Style Sheets". That means that a top-level element will cascade its styles to its child elements. As long as .a_div_test elements are contained within the subtree of elements of .font_arial_36, they will receive (inherit) all the styles from .font_arial_36.

That's why you define a font-family inside the <body> tag if you want it to apply to all elements within the page.

That is, the inheritance is defined by the HTML structure, not the CSS itself.

Upvotes: 1

Sashi yadav
Sashi yadav

Reputation: 358

if you don't want to add multiple classes to html element then 

.font_arial_36, .a_div_test {
 font-family:Arial;
 font-size:36px;
}

.a_div_test {
  width:300px;
  max-width:350px;
}

other than this no other possible way seems to be there for inheritance in css, we have to use sass

Upvotes: 0

Yogee
Yogee

Reputation: 1442

As suggested by others, there is no way you can inherit once CSS property into another. Only way is to add both the class to a DOM element to mimic the inheritance. Css solution:

<button class="uiButton disabledButton">Click Here</button>

For below CSS:

.uiButton {
  background-color: gray;
  color: lightgray;
  font-size: 20px;
  font-family: "Segoe UI", Helvetica, sans-serif;
  text-align: center;
  text-decoration: none;

  padding: 10px 10px;
  border:none;
  display: inline-block;
  margin: 5px 5px;
  cursor: pointer;
}

.disabledButton
{
    background-color: gray;
    color: lightgray;
    cursor: not-allowed;
}

In above: The Button is first styled with uiButton class and then disabledButton class. So whichever CSS class you write later in 'class' attribute, will overwrite properties of earlier one (in case if anything is common).

But, there is a better way:

Yes, if you are ready to use CSS pre-processors like https://sass-lang.com/guide

Note that Sass is a pre-processor. Meaning, Sass file (.scss) will be compiled into CSS (but chrome provides nice debugging for .scss i.e. Sass file). You can write plain CSS in the SCSS file and additionally use directives to achieve inheritance and much more. To make the life easier, there are some software which will automatically create css when scss file is modified (I know http://koala-app.com/ which does that).

Upvotes: 0

Igal S.
Igal S.

Reputation: 14534

This is not possible in CSS. What you do is you assign the 2 classes to the element you want.

<div class="font_arial_36 a_div_test"></div>

Upvotes: 3

xkeshav
xkeshav

Reputation: 54016

why you need to extend when you can add multiple classes with space on HTML element.

<div class="font_arial_36 a_div_test">Like this</div>

Upvotes: 0

Related Questions