CSS :nth-last-of-type() Pseudo Class

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

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

The :nth-last-of-type() pseudo-class is similar to :nth-of-type() but there is a difference: it counts the items from the end whereas the nth-of-type counts them from the beginning.

This pseudo-class is also similar to :nth-last-child with one difference: it is more specific. The :nth-last-of-type targets a certain kind of element in the arrangement only with relation to similar siblings.

Version

Selectors Level 4

Selectors Level 3

Syntax

:nth-last-of-type() {
  css declarations;
}

Example of the :nth-last-of-type() pseudo-class:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-last-of-type(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:nth-last-of-type() selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
  </body>
</html>

Try it Yourself »

Example of the :nth-last-of-type() pseudo-class with "odd" and "even":

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

Try it Yourself »

Example of the :nth-last-of-type() pseudo class with a formula (an + b):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-last-of-type(3n+0) {
        background: #767fea;
        padding: 10px;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    <p>The fifth paragraph.</p>
    <p>The sixth paragraph.</p>
    <p>The seventh paragraph.</p>
    <p>The eight paragraph.</p>
    <p>The ninth paragraph.</p>
  </body>
</html>