CSS Specificity not applying when used on table row and cell

Question

My understanding of CSS Specificity is that tr.makeitred should overrule .makeitblue.

So what am I missing that means in this case the Blue is still blue from .makeitblue... instead of being overridden by the higher specificity of tr.makeitred?

(Even adding !important to make it color:red !important doesn't do anything)

tr.makeitred {
  color:red;
}
.makeitblue {
  color:blue;
}

<table>
  <tbody>
    <tr class="makeitred">
      <td>Red</td>
      <td class="makeitblue">Blue</td>
    </tr>
  </tbody>
</table>