W3docs
en
Log in

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

The :nth-last-of-type() CSS pseudo-class selects the elements starting from the last element upwards. Read about the pseudo-class and try examples.

The :nth-last-of-type() CSS pseudo-class matches elements of a given type, counting from the last element of that type among its siblings. It is the mirror image of :nth-of-type(), which counts from the first.

This is useful when the number of elements is unknown or changes dynamically and you need to style items relative to the end of a list — for example, highlighting the last few rows of a table or the final items in a navigation menu, regardless of how many come before them.

Syntax

The pseudo-class accepts a single argument inside the parentheses: a number, a keyword, or a formula.

:nth-last-of-type( <nth> ) {
  /* style declarations */
}
ValueDescription
numberMatches the exact nth element of its type, counting from the end (1 = the last one).
odd / evenMatches elements at odd or even positions counted from the end.
an + bMatches every a-th element starting at offset b, counting from the end. a and b are integers and n runs 0, 1, 2, ….

How the an + b formula works

The browser substitutes n = 0, 1, 2, … into the formula and keeps every position it produces. Counting always starts at the last element of the matching type:

  • 2n (same as even) → positions 2, 4, 6, … from the end.
  • 2n + 1 (same as odd) → positions 1, 3, 5, … from the end.
  • 3n + 1 → positions 1, 4, 7, … from the end.
  • -n + 3 → the last three elements (positions 3, 2, 1 from the end).
  • :nth-of-type() counts the same matching elements but starts from the beginning instead of the end.
  • :nth-last-child() also counts from the end, but it considers all sibling elements, not just those of the same type. :nth-last-of-type() ignores siblings of other types when counting. The two have identical specificity.

See also :last-of-type, which is equivalent to :nth-last-of-type(1).

Examples

Selecting an exact position from the end

Here :nth-last-of-type(3) selects the third paragraph counted from the end — that is "Paragraph 4" in a list of six.

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

Using the odd and even keywords

Counting from the end, odd matches the 1st, 3rd, 5th, … paragraphs (so "Paragraph 6", "Paragraph 4", "Paragraph 2"), and even matches the 2nd, 4th, 6th, … ("Paragraph 5", "Paragraph 3", "Paragraph 1"). Together they style every paragraph in two alternating colors.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-last-of-type(odd) {
        background: #1c87c9;
        color: #eeeeee;
      }
      p:nth-last-of-type(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 »

Using a formula (an + b)

With nine paragraphs, 3n + 1 matches every third paragraph counting from the end — positions 1, 4, and 7 from the end, i.e. the 9th, 6th, and 3rd paragraphs in document order.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-last-of-type(3n+1) {
        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 eighth paragraph.</p>
    <p>The ninth paragraph.</p>
  </body>
</html>
Try it Yourself »

Selecting the last N elements

A negative coefficient is the idiomatic way to target the last few items. -n + 3 matches the last three paragraphs regardless of the total count:

p:nth-last-of-type(-n + 3) {
  font-weight: bold;
}

Browser support and specification

:nth-last-of-type() is supported in all modern browsers. It is defined in:

Practice

Practice
What is the function of the :nth-last-of-type CSS pseudo-class?
What is the function of the :nth-last-of-type CSS pseudo-class?
Was this page helpful?