css inheritance classes not working

Question

I have two div elements:

  <div  class = "clsdiv1">Hello</div>
  <div  class = "clsdiv2">Bye</div>

and those css classes:

.clsdiv{
  background: red;
}

.clsdiv1 {
  background: black;
  border: 2px solid black;
}
.clsdiv2 {
  background: green;
  border: 2px solid white;
}

I want the clsdiv1 and clsdiv2 inherit background color from clsdiv class,so I implement it this way:

.clsdiv1 .clsdiv{
  background: inherit;
  border: 2px solid black;
}
.clsdiv2 .clsdiv{
    background: inherit;
  border: 2px solid white;
}

But inheritance not working,any idea what I'm missing? Why inheritence not working?

<div class = "clsdiv1 clsdiv">Hello</div> <div class = "clsdiv2 clsdiv">Bye</div> — Alien
– Alien, Commented Dec 8, 2014 at 9:52

feeela · Accepted Answer · 2014-12-08 09:53:41Z

1

Yes, you are not referencing the class name that should get inherited at the element. If you want to make it work with your current CSS, you may use the following markup:

<div  class = "clsdiv clsdiv1">Hello</div>
<div  class = "clsdiv clsdiv2">Bye</div>

You don't even need to inherit the background color, as it already was set to the same element:

.clsdiv {
    background: red;
}
.clsdiv1 {
    border: 2px solid black;
}
.clsdiv2 {
    border: 2px solid white;
}

On the other hand, such a setup has nothing to do with inheritance…

answered Dec 8, 2014 at 9:53

feeela

30k7 gold badges61 silver badges73 bronze badges

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

Comments

Sameer Shaikh · Accepted Answer · 2014-12-08 11:08:32Z

1

Well you are approaching it the wrong way.

<div  class = "clsdiv">Hello</div>
<div  class = "clsdiv">Bye</div>

.clsdiv{
  background: red;
}

if you want both div to have red color background give them the same class

edited Dec 8, 2014 at 11:08

answered Dec 8, 2014 at 10:01

Sameer Shaikh

7,8642 gold badges19 silver badges34 bronze badges

2 Comments

user663031 Over a year ago

Why would I use !important?

Sameer Shaikh Over a year ago

oh that was my mistake.. !important is not necessary here.

Collectives™ on Stack Overflow

css inheritance classes not working

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related