CSS :nth-last-of-type() Selector

What You’ll Learn

The :nth-last-of-type() pseudo-class targets elements by their position among siblings of the same tag type, counting from the end. It combines reverse counting with type-specific matching.

Introduction

The :nth-last-of-type() selector in CSS lets you target elements based on their position among siblings of the same element type, counting from the last element of that type backward.

It is especially useful when a parent contains mixed tags — such as paragraphs, headings, and divs — and you need to style the last few paragraphs without being thrown off by other elements that follow.

Definition and Usage

Write element:nth-last-of-type(n) where n is a number, the keyword odd or even, or a formula like 2n+1 or -n+3.

📝 Syntax

The syntax for the :nth-last-of-type() pseudo-class is:

element:nth-last-of-type(n) {
  /* CSS properties */
}

element is the tag type you want to match. n can be a number, keyword, or an+b formula.

Common Patterns

The an+b Formula (By Type, From the End)

• n is a counter starting at 0, increasing by 1 for each sibling of the same type from the end.
• a is the step size — positive steps skip toward earlier siblings of that type; negative steps select the last N of that type.
• b is the offset — the starting position when counting from the last element of that type.

Related Selectors

• :nth-of-type() — counts from the first sibling of that type forward
• :nth-last-child() — counts all sibling children from the end (any tag type)
• :last-of-type — shorthand for :nth-last-of-type(1)
• :not() — combine for exclusions like p:not(:nth-last-of-type(1))

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

:nth-last-of-type() is ideal when tag type and reverse position both matter:

• Article closings — Style the last <p> even when a footer <div> follows.
• Last N of a type — h2:nth-last-of-type(-n+2) for the final two headings.
• Navigation lists — li:nth-last-of-type(1) for the last menu item of its type.
• Mixed sibling groups — Ignore <div> or <span> elements between paragraphs.
• Reverse stripes by type — tr:nth-last-of-type(2n) when only table rows of a section should alternate.

Examples Gallery

Practice :nth-last-of-type() with list items, mixed-content paragraphs, targeted positions, and last-N patterns.

li:nth-last-of-type(1) {
  background: #dbeafe;
}

li:nth-last-of-type(2) {
  background: #dcfce7;
}

li:nth-last-of-type(2n) {
  font-weight: 700;
}

<style>
  p:nth-last-of-type(1) {
    color: #b91c1c;
    font-weight: 700;
  }
</style>

<article>
  <p>Intro paragraph.</p>
  <p>Middle paragraph.</p>
  <p>Closing paragraph.</p>
  <div class="footer">Share this article</div>
</article>

p:nth-last-of-type(2) {
  background: #fef3c7;
  border-left: 4px solid #d97706;
  padding-left: 0.65rem;
}

p:nth-last-of-type(-n+2) {
  background: #eff6ff;
  padding: 0.5rem 0.65rem;
  border-radius: 0.35rem;
}

💬 Usage Tips

• Prefer :last-of-type for one item — :nth-last-of-type(1) works, but :last-of-type is more readable.
• Use -n+k for last N of a type — p:nth-last-of-type(-n+3) for the last three paragraphs.
• Include the element type — Always write p:nth-last-of-type(), not bare :nth-last-of-type().
• Mixed siblings — This is the go-to selector when other tag types sit between your targets.
• Combine with parents — article > p:nth-last-of-type(1) scopes to direct children.

⚠️ Common Pitfalls

• Only counts same tag type — p:nth-last-of-type(1) ignores <div> siblings but only matches <p> elements.
• Confusing with nth-last-child — A footer div after paragraphs breaks :nth-last-child() but not :nth-last-of-type().
• 1-based, not 0-based — The last of type is :nth-last-of-type(1), not 0.
• Tag must match — div:nth-last-of-type(1) will not match a <p> element.
• Overlapping rules — Multiple :nth-last-of-type() rules can apply to the same element; watch specificity.

♿ Accessibility

• Contrast on highlights — Emphasized last paragraphs must still meet WCAG contrast requirements.
• Do not rely on color alone — Pair visual cues with clear headings or labels where meaning matters.
• Semantic markup — Use proper <p>, <ul>, and heading tags for screen readers.
• Reading order — Styling the last paragraph does not change document order for assistive technology.

💡 Best Practices