Search code examples
csshtml-tablefont-sizecss-specificity

Possible CSS Specificity and Inheritance Bug with nested tables

Can anyone shed some light on this?

HTML:

<table>
  <tr>
    <td></td>
    <td class="size20">
      <div>Div 1 is font-size: 20px</div>
      <table>
        <tr>
          <td>
            <div>Div 2 should be font-size 20px because of inheritance and specificity</div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

CSS:

.size20 {
  font-size: 20px;
}

td {
  font-size: 10px;
}

http://codepen.io/geoyws/pen/wGqqMB

Solution

  • The inherited value is only used when the cascade doesn't resolve a value for the given element. See "specified values" in the spec.

    Your inner div has a font size of 10 pixels because it inherits from the inner td, which itself has a font-size: 10px declaration. The value that's inherited from all of the inner td's ancestors up to .size20 is ignored since the cascade has already determined a value for that td based on that declaration. Specificity is completely irrelevant because the .size20 selector doesn't even match the inner td in the first place. The fact that you're dealing with tables is also irrelevant.

    Everything is working as designed. There is no flaw in either the specification or browsers as you suggest.