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

Definition and Usage

The :nth-last-of-type() pseudo-class matches elements by their position among siblings of the same tag name, counting from the end. Other element types are skipped in that count.

Example: span:nth-last-of-type(2) styles the second-to-last span, even if an em or div sits between spans. Contrast with :nth-last-child(), which counts every sibling.

CSS Syntax

Examples: p:nth-last-of-type(1), span:nth-last-of-type(2n), dd:nth-last-of-type(-n+3).

Pattern Values

Pass one pattern; indices count same-tag siblings from the end:

How to Use :nth-last-of-type()

Pick a tag, count only that tag from the end, then style.

1. Use mixed content under one parent when you need the “skip other tags” behavior.
2. Choose the element type (p, span, dd, …).
3. Add :nth-last-of-type(pattern) with odd, a number, or An+B.
4. Compare with :nth-last-child() if results look wrong — you may be counting all children by mistake.

Live Preview

Mixed siblings: only span nodes are counted from the end. Other tags stay unmarked.

CSS Examples

Same-type counting from the end, with mixed siblings where it matters. Use Try It Yourself for a live editor.

<style>
  span:nth-last-of-type(2) {
    background: #bbf7d0;
  }
</style>

<div>
  <span>A</span>
  <em>skip</em>
  <span>B</span>
  <span>C</span>
</div>

<style>
  p:nth-last-of-type(-n+3) {
    border-left: 4px solid #2563eb;
  }
</style>

<article>
  <h2>Title</h2>
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
</article>

<style>
  p:nth-last-of-type(odd) {
    background: #fef3c7;
  }
</style>

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

Key Takeaways