How to inherit css from grandparent tag? [duplicate]

Question

I am having a two level nested div and I want to apply the div holding a class "c" with the same width of div with class a. If it is parent then I guess inherit will do the job. But what to be done in this case?

HTML CODE:

<div class="a">
  <div class="b">
     <div class="c">

     </div>
  </div>
</div>

CSS CODE

.a{
 width:600px;
}
.b{
width:80%;
}
.c{
//needs to inherit width property set for class a without directly mentioning it as 600px
}

Answer 1

You can add multiple classes to the grandchild div to include the properties of a to c.

Also setting 80% for .b will result in 80% of 600px = 480px for .c You need to modify it to 100%.

.a {
  width: 600px;
}
.b {
  width: 100%;
}

<div class="a">
  <div class="b">
    <div class="a c">
      I am 600px wide.
    </div>
  </div>
</div>

Answer 2

Unfortunately you cannot do this in pure CSS, by default the child element never inherits the width, you need to specify it, yes, by default it will span 100% if you use a block level element like a div or p tag but inorder to inherit(re use) the property of grand parent you can use CSS pre processors like LESS or SASS..

So if you want to do this in SASS we can do something like

.a {
  width: 600px;
}

.b {
  width: 80%;
}

.c {
  @extend .a;
  //This is still not an inheritance, you are simply pulling in all the
  //properties defined in .a to this class
}

So here it will pick all the properties from .a to .c. But here's a catch, when you use . notation in SASS, it will literally print the .a block as well, so if you want to only use it for @extend purpose, you can write this selector instead

%a {
  width: 600px;
}

.c {
  @extend %a;
}

Here SASS won't print .a anymore but only .c.You can refer the official docs for more over SASS @extend

You can also define variables in SASS so defining one with $base-width: 600px; and re using it across can make sense as well. If you still want to stick with traditional CSS than I would recommend you declaring multiple classes just like Manoj suggested but I would not do this as if you are declaring any properties in .a and same in .c things will start getting messy.