Styling the last td in a table with css

I want to style the last TD in a table without using a CSS class on the particular TD.

<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
    </tr>
  </tbody>
</table>

table td 
{ 
  border: 1px solid black;
}

I want the TD containing the text "Five" to not have a border but again, I do not want to use a class.


Solution 1:

The :last-child selector should do it, but it's not supported in any version of IE.

I'm afraid you have no choice but to use a class.

Solution 2:

You can use the :last-of-type pseudo-class:

tr > td:last-of-type {
    /* styling here */
}

See the MDN for more info and compatibility with the different browsers.
Check out the W3C CSS guidelines for more info.

Solution 3:

You can use relative rules:

table td + td + td + td + td {
  border: none;
}

This only works if the number of columns isn't determined at runtime.