title: Compounded relative font-sizes: a clean way to adopt the font-size of the child, not the parent element
body: <p>For example, if I have:</p>
  
  <pre><code>td { font-size: 1.3em }
  
  h2 { font-size: 2em }
  h3 { font-size: 1.6em }
  p { font-size: 1.2 }
  </code></pre>
  
  <p>And I have headings/paragraphs inside my table-cells, I know that I can avoid compounding the font-sizes by the following:</p>
  
  <pre><code>td h2, td h3, td p { font-size: 1em }
  </code></pre>
  
  <p>Which would result in the headings/paragraphs in my table-cells having font-size of 1.3em (that of the td).</p>
  
  <p>But what I'm looking for is a nice, clean way for each child element to have it's original font-size, not that of the parent.</p>
  
  <p>I'd really like to avoid doing the following (and of course I'd like to avoid using px):</p>
  
  <pre><code>td h2 { font-size: 1.54em }  // 1.3 x 1.54 ~ 2
  td h3 { font-size: 1.23em }  // 1.3 x 1.23 ~ 1.6
  td p { font-size: 0.92em }  // 1.3 x 0.92 ~ 1.2
  </code></pre>
  
  <p>For anyone familiar with <a href="http://lesscss.org/" rel="nofollow noreferrer">LESS</a>, I'm using that, and thought I should be able to use it to do the calculations for me, e.g. Using accessors:</p>
  
  <pre><code>td h2 { font-size: h2['font-size'] / td['font-size'] }
  </code></pre>
  
  <p>This at least would use the original values to do the calculation but feels just as clumsy as the above and besides, it seems LESS no longer supports accessors anyway.</p>
  
  <p>This seems so simple in concept, I feel like the answer's staring me in the face, but I've been banging my head against this for a while and can't find the answer anywhere.</p>