CSS :nth-last-child Pseudo Class

The :nth-last-child() pseudo-class selects elements based on their index starting from the last element upwards.

The :nth-last-child() can be specified by a number, a keyword, or a formula.

Keyword values

odd

Selects elements with odd index numbers (e.g 1, 3, 5, 7 etc.).

even

Selects elements with even index numbers (e.g 2, 4, 6, 8 etc.).

Functional notation

<An+B>

Selects elements whose numeric position matches the pattern An+B (for every positive integer or zero value of n). The first element’s index is 1, and n in the formula starts from 0. The values A and B must be integers.

Version

Selectors Level 4

Selectors Level 3

Syntax

:nth-last-child() {
css declarations;
}

Example of the :nth-last-child() selector:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-child {
      background-color: #1c87c9;
      color:#fff;
      }
    </style>
  </head>
  <body>
    <h2>:nth-last-child selector example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Example of "odd" and "even" keywords:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      p:nth-last-child(odd) {
      background: #1c87c9;
      color:#eee;
      }
      p:nth-last-child(even) {
      background: #666;
      color:#eee;
      }
    </style>
  </head>
  <body>
    <h2>:nth-last-child selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </body>
</html>

Example of :nth-last-child() with the <table> tag:

<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
      border: 1px solid  #8EBF41;
      border-spacing: 10px;
      font-family:sans-serif;
      }
      table tr{
      background-color: #cccccc;
      }
      /* Selects the last three elements */
      tr:nth-last-child(-n+3) {
      background-color:  #8EBF41;
      }
      table tr td{
      padding:10px;
      }
      /* Selects every element starting from the second to last item */
      tr:nth-last-child(n+2) {
      color: #ffffff;
      }
      /* Select only the last second element */
      tr:nth-last-child(2) {
      font-weight: 900;
      }
    </style>
  </head>
  <body>
    <h2>:nth-last-child selector example</h2>
    <table>
      <tbody>
        <tr>
          <td>First row</td>
        </tr>
        <tr>
          <td>Second row</td>
        </tr>
        <tr>
          <td>Third row</td>
        </tr>
        <tr>
          <td>Fourth row</td>
        </tr>
        <tr>
          <td>Fifth row</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Example of :nth-last-child() with the <li> tag:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* If there are at least three list items,
      style them all */
      li:nth-last-child(n+3),
      li:nth-last-child(n+3) ~ li {
      color: #8EBF41;
      }
    </style>
  </head>
  <body>
    <h2>:nth-last-child selector example</h2>
    <ol>
      <li>List Item One</li>
      <li>List Item Two</li>
    </ol>
    <ol>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
      <li>List Item Five</li>
      <li>List Item Six</li>
    </ol>
  </body>
</html>

Browser support

4.0+ 12.0+ 3.5+ 3.2+ 10.0+

Practice Your Knowledge

The :nth-last-child() pseudo-class selects elements



Do you find this helpful?

Related articles