:nth-last-child

The :nth-last-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings after it in the document tree, for a given positive or zero value for n, and has a parent element.

In effect, it functions the same as :nth-child except it selects items counting backwards from the end of element series, not the start.

See :nth-child for a more thorough description of the syntax of its argument.

Syntax

:nth-last-child( <an-plus-b> [ of <selector># ]? ) { style properties }
where 
<an-plus-b> = An+B | even | odd

Examples

Example selectors

tr:nth-last-child(-n+4)

Matches the last four rows of an HTML table.

span:nth-last-child(even)

Matches the even elements in their parent element, starting at the last element and working backward.

Usage

This CSS ...

table {
  border: 1px solid blue;
}
tr:nth-last-child(-n+3) { /* the last 3 siblings */
  background-color: lime;
}

... with this HTML ...

<table>
  <tbody>
    <tr>
      <td>First line</td>
    </tr>
    <tr>
       <td>Second line</td>
    </tr>
    <tr>
       <td>Third line</td>
    </tr>
    <tr>
       <td>Fourth line</td>
    </tr>
    <tr>
       <td>Fifth line</td>
    </tr>
  </tbody>
</table>

... looks like :

Specifications

Specification	Status	Comment
Selectors Level 4 The definition of ':nth-last-child' in that specification.	Working Draft	No change
Selectors Level 3 The definition of ':nth-last-child' in that specification.	Recommendation	Initial definition

Browser compatibility

See also

• :nth-child