title: CSS : Inheritance is not working as exected in subclasses
body: <p>I have a css class "MyParent" which is being inherited by multiple sub classes.
  I want some of the properties of the "MyParent" class, should be overridden by the sub classes as they want and this overridden should not effect the other subclasses.
  please find the below examples.</p>
  
  <pre><code>.MyParent {
    border-style: solid;
    border-color: red;
    background-color: yellow;
    color: red;
  }
  .MyChild1 .MyParent{
     background-color: blue !important;
     color: white !important;
  }
  
  .MyChild2 .MyParent{
    background-color: yellow !important;
    color: black !important;
  }
  </code></pre>
  
  <p>And My Html looks like as below.</p>
  
  <pre><code>&lt;div class="MyParent"&gt;
   this is parent div
  &lt;/div&gt;
  
  &lt;div class="MyChild1"&gt;
   this is child1
  &lt;/div&gt;
  
  &lt;div class="MyChild2"&gt;
   this is child2
  &lt;/div&gt;
  </code></pre>
  
  <p>i expect the MyParent div to be displayed with yellow back groud color with font color is red, this is working fine but the rest divs are not working as expected though i override the properties. What i did was, please find the code below.</p>
  
  <pre><code>.MyChild1, .MyParent{
    background-color: blue !important;
    color: white !important;
   }
  
  .MyChild2, .MyParent{
     background-color: green !important;
     color: white !important;
  }
  </code></pre>
  
  <p>Now its working partially, but the propery we override in class "MyChild2" is affecting the parent class property. because of this the div which is having class "MyParent" is not getting render as expected because of this inheritance.Because of this in most of the places of the application the output is getting disturbed. In case if I want this to be worked as expected I can write one more subclass and we can do it, also writing subclass each and every time is annoying also <strong>some of the properties like bordercolor is not getting inherited</strong>. But Why is this behavior in CSS, and how can we correct it. Can anybody explain me about it.</p>
  
  <p>Thanks in advance,
  Saran.</p>