<div id="parent">
  <p>親要素</p>
  <div id="child">
    <p>子要素</p>
    <div id="grandchild">
      <p>孫要素</p>
    </div>
  </div>
</div>
html {
  font-size: 16px;
  /*
      ルート要素の16px = 1rem
      */
}

#parent {
  font-size: 1rem;
  /*
          ルート要素の16px
        */
}
#child {
  font-size: 1.5rem;
  /*
          ルート要素の16px * 1.5 = 24px;
        */
}
#grandchild {
  font-size: 2rem;
  /*
    ルート要素の16px * 2 = 32px;
        */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.