The easiest way to select the last row of a table is to use the :last-child selector in combination with the descendant selector.
The :last-child selector selects an element that is the last child of its parent. In our case we want to select the last row, therefore we have to use tr:last-child.
See this working example:
Example:
tbody tr:last-child{
background: yellow;
}
While selecting the last row of the table using the :last-child selector, it is important to precede the tr:last-child with tbody, i.e. either use tbody>tr:last-child or tbody tr:last-child.
If you don’t precede, the table header will also be selected as it does also contain a row(tr) which is also the first and last child of its parent(thead).
See this example:
Example:
tr:last-child{
background: yellow;
/* Last row and table header both will be selected */
}
