How to make inheritence in CSS?

Question

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.

This is not how inheritance work in CSS. You do that by having these 2 classes written on an HTML tag. What you are trying to do require CSS preprocessors like Less and Sass — Ahmad Alfy
– Ahmad Alfy, Commented Dec 31, 2018 at 12:09
So this is not possible in css to have inheritence of classes? — orochi
– orochi, Commented Dec 31, 2018 at 12:33
In css, no. Indirectly, via css preprocessors like Sass, yes! — Yogee
– Yogee, Commented Dec 31, 2018 at 12:50

sri harsha · Accepted Answer · 2018-12-31 16:11:25Z

3

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>

edited Dec 31, 2018 at 16:11

sri harsha

6806 silver badges16 bronze badges

answered Dec 31, 2018 at 12:09

Igal S.

14.8k5 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

orochi Over a year ago

I knwo I could to it. but this is not like inheritence... I'll post on the questions thanks.

leuquim · Accepted Answer · 2019-01-04 15:16:47Z

1

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.

edited Jan 4, 2019 at 15:16

answered Jan 4, 2019 at 12:08

leuquim

6556 silver badges18 bronze badges

Comments

xkeshav · Accepted Answer · 2018-12-31 12:10:08Z

0

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>

answered Dec 31, 2018 at 12:10

xkeshav

54.2k47 gold badges183 silver badges256 bronze badges

Comments

Yogee · Accepted Answer · 2019-01-02 04:28:38Z

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).

Sashi yadav · Accepted Answer · 2019-01-04 12:28:36Z

0

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

edited Jan 4, 2019 at 12:28

answered Dec 31, 2018 at 12:15

Sashi yadav

3764 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to make inheritence in CSS?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related