<div id="parent">
  <p>親要素</p>
  <div id="child">
    <p>子要素</p>
    <div id="grandchild">
      <p>孫要素</p>
    </div>
  </div>
</div>
#parent {
  font-size: 20px;
}
#child {
  font-size: 150%;
  /*
      #parentの20pxの150%
      20 * 1.5 = 30px
    */
}
#grandchild {
  font-size: 200%;
  /*
      #childの30pxの200%
      30 * 2 = 60px
    */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.