CSS - :nth-last-child

Examples

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

<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>

Syntax  

:nth-last-child( <a href="css/:nth-last-child#an-plus-b"><an-plus-b></a> <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> of <selector><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a> ) <a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a> <var>style properties</var> <a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a><p>where <br><code><an-plus-b> = <var>A</var>n<a title="Plus" href="css/value_definition_syntax#plus_(.2b)">+</a><var>B</var> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> even <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> odd</code></p>

Description  

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.

Browser Compatibility  

See Also  

• :nth-child

Specifications  

License