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.