Cyrus Yip's blog

Introduction to Inheritance in CSS

Cyrus Yip

Elements inherit some CSS properties from their ancestors. You can check whether a property is inherited in the formal definition section on MDN, e.g. width and color.

1
2
3
4
5
<div class="grandparent">
  <div class="parent">
    <div class="child">I inherit the green color from my parent, and the italic style from my grandparent. I don't inherit the border.</div>
  </div>
</div>
1
2
3
4
5
6
7
.grandparent {
  font-style: italic;
  border: 2px solid black; /* not inherited */
}
.parent {
  color: green;  
}

CSS provides five universal property values to control inheritance.

The CSS shorthand property all applies one of these values to all properties of an element.

Tags:
comments powered by Disqus