How to to select the last class or last of type in css

Question

So here's my problem. I am trying to add text " times" after the input cell using CSS. I was able to accomplish that by using the css code below.

Now I wanted to update the last one to something like " total" instead. Keep in mind that the options are dynamic and not fixed.

CSS

<style>
   .input_cell:after  { content: " times"; }
</style>

HTML

<table>
<tr><td class="input_cell"><input type="text" name="B1" size="3"  id="B1">
</td><td class="option_cell"><div class="options">Math</div></td>
</tr><tr><td class="input_cell"><input type="text" name="B2" size="3"  id="B2">
</td><td class="option_cell"><div class="options">Science</div></td>
</tr><tr><td class="input_cell"><input type="text" name="B3" size="3"  id="B3">
</td><td class="option_cell"><div class="options">History</div></td>
</tr><tr><td class="input_cell"><input type="text" name="B4" size="3"  id="B4">
</td><td class="option_cell"><div class="options">Geology</div></td>
</tr><tr><td class="input_cell"><input type="text" name="B5" size="3"  id="B5">
</td><td class="option_cell"><div class="options">Algebra</div></td>
</tr><tr><td class="input_cell"><input name="B_total" type="text" size="3" class="total" id="B_total"></td><td class="option_cell"><div class="options">Total</div></td></tr>
</table>

Answer 1

You would need to do this:

tr:last-child>td.input_cell:after {content: " total";}

The reason for this is that the last-child thing is the row of the table.