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:


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:


    background: yellow;
    /* Last row and table header both will be selected */


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts