How to Select Last Row in a Table using CSS?

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 */
}

---