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

Beginner
7 min read
Updated: Oct 2026
5 examples
Live preview
Definition

What Is :nth-last-of-type()?

:nth-last-of-type(index) selects elements that are the nth sibling of their tag name, counting from the last same-type sibling. Other tags in between do not change the count. Available since jQuery 1.9.

Remember
$(":nth-last-of-type(index | even | odd | equation)")

$("li:nth-last-of-type(1)")     → last li (≡ :last-of-type)
$("li:nth-last-of-type(2)")     → second-to-last li
$("span:nth-last-of-type(1)")   → last span among siblings

$("li:nth-last-child(2)")       → 2nd-to-last among ALL children
$("li:nth-of-type(2)")          → 2nd li from the start
UsePrefer
Nth of this tag from the end$("li:nth-last-of-type(2)")
Nth child among all tags from end$("li:nth-last-child(2)")
Nth of this tag from the start$("li:nth-of-type(2)")
Approach

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

Pick a tag, then pass an index, keyword, or equation counted among that tag only — from the end.

  1. Choose the element type (li, p, span, and so on).
  2. Pass a 1-based index from the last same-type sibling, or even/odd/An+B.
  3. Ignore other tag names when counting — they do not shift of-type indexes.
  4. Use :nth-last-child() if every sibling type should count.
PieceRequired?Role
Base / typeUsuallyTag name that defines the of-type group
:nth-last-of-type(…)YesReverse index within that type
ArgumentYesIndex, even/odd, or equation

Pseudocode

Pseudocode
for each element E matching base:
    sameType = siblings of E.parent with tagName === E.tagName
    indexFromEnd = 1-based position of E in sameType
                   counting from the last same-type sibling
    if indexFromEnd matches (n | even | odd | An+B):
        keep E

return jQuery(kept)
Reference

Cheat Sheet

Keep these facts handy while counting same-type siblings from the end.

TopicDetail
Syntax$(":nth-last-of-type(n | even | odd | An+B)")
Counting1-based among same tag, from the end
(1)Same as :last-of-type
vs :nth-last-child()Same type only vs all children
vs :nth-of-type()From end vs from start
SincejQuery 1.9 (CSS)
Try it

Live Preview

Pick a pattern against two lists (and a mixed block) to see of-type matches from the end.

Lists mirror the official demo; the mixed block shows of-type vs last-child.

Result
$("ul li:nth-last-of-type(2)")
matched: 2
text: Adam, Timmy

/* same-tag siblings, counted from the end */
Code

jQuery Examples

Short, copy-ready snippets. Open a browser console with jQuery loaded, or use Try It Yourself for a live editor.

Example 1 — Official Demo: ul li:nth-last-of-type(2)

Mark the second-to-last li in every list (jQuery API example).

jQuery
$("ul li:nth-last-of-type(2)").each(function () {
  this.textContent = this.textContent + " - 2nd to last!";
});

console.log($("ul li:nth-last-of-type(2)").length);
Try It Yourself

How It Works

  1. Group by tag. Only li siblings are numbered.
  2. Count from the end. Last li is 1; previous li is 2.
  3. One per list. Each ul contributes its penultimate li.
  4. Append a note. Official demo style: add - 2nd to last!.

Example 2 — Last of Type: (1) ≡ :last-of-type

Show that index 1 from the end is the last element of that type.

jQuery
var a = $("ul li:nth-last-of-type(1)").map(function () {
  return this.textContent.trim();
}).get().join(", ");

var b = $("ul li:last-of-type").map(function () {
  return this.textContent.trim();
}).get().join(", ");

console.log(a);
console.log(b);
console.log(a === b);
Try It Yourself

How It Works

  1. Index 1 from the end. That is always the last li in the parent.
  2. Compare with :last-of-type. Same nodes on the same markup.
  3. Prefer the short form. Use :last-of-type when you only need the last of that tag.
  4. Go deeper. Use (2), (3), … for earlier same-type siblings.

Example 3 — Of-Type vs :nth-last-child()

Mixed tags show why same-type counting matters.

jQuery
// Markup: <span>A</span> <p>note</p> <span>B</span>
console.log("of-type:", $("span:nth-last-of-type(1)").text());
console.log("last-child:", $("span:nth-last-child(1)").length);

// of-type → "B" (last span)
// last-child → 0 (last child is the p)
Try It Yourself

How It Works

  1. Of-type group. Spans are numbered A=2, B=1 from the end.
  2. Last span wins. span:nth-last-of-type(1) selects B.
  3. All-children check. The last child is p, so span:nth-last-child(1) fails.
  4. When to choose. Mixed siblings → of-type; strict child slots → :nth-last-child().

Example 4 — Even Positions from the End

Stripe same-type siblings using even counted backward.

jQuery
console.log("even:", $("ul li:nth-last-of-type(even)").length);
console.log("odd:", $("ul li:nth-last-of-type(odd)").length);

$("ul li:nth-last-of-type(even)").each(function () {
  this.textContent = "[E] " + this.textContent;
});
Try It Yourself

How It Works

  1. Number only li. Other tags (if any) are skipped in the count.
  2. From the end. Last li is odd (1); previous is even (2).
  3. Prefix even matches. Positions 2, 4, 6… from the end.
  4. Official playground. Docs also demo 3n and 3n+1 the same way.

Example 5 — :nth-last-of-type() vs :nth-of-type()

Same of-type counting, opposite directions.

jQuery
var fromEnd = $("ul li:nth-last-of-type(2)").map(function () {
  return this.textContent.trim();
}).get().join(", ");

var fromStart = $("ul li:nth-of-type(2)").map(function () {
  return this.textContent.trim();
}).get().join(", ");

console.log("from end:", fromEnd);
console.log("from start:", fromStart);
Try It Yourself

How It Works

  1. Both count only li. Other tags would not change either count.
  2. Last-of-type direction. :nth-last-of-type(2) walks backward.
  3. Of-type direction. :nth-of-type(2) walks forward.
  4. Pick by intent. Near the end → last-of-type; near the start → :nth-of-type().

Edge Cases & Pitfalls

Check these before relying on :nth-last-of-type() in real projects.

type

Only the same tag counts

A trailing p does not stop span:nth-last-of-type(1) from matching the last span. It does block span:nth-last-child(1).

index

1-based from the last of that type

Official docs: with three lis, li:nth-last-of-type(1) selects the third (last) li.

class

Classes do not create a new type

div.card:nth-last-of-type(1) still counts all div siblings by tag name, then checks the class — it is not “last card among cards” alone.

direction

(2) ≠ second of type from the start

Use :nth-of-type(2) for the second same-tag sibling from the top.

Compatibility

Browser Support

:nth-last-of-type() is standard CSS and has worked in jQuery since 1.9. Modern browsers implement it in native querySelectorAll.

✓ CSS · jQuery 1.9+

jQuery :nth-last-of-type()

Supported in all modern browsers. Native: document.querySelectorAll("li:nth-last-of-type(2)"). Same-tag siblings, counted from the end.

100% Standard CSS selector
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
:nth-last-of-type() Universal

Bottom line: Safe everywhere modern jQuery runs. Prefer it over :nth-last-child() when other tags sit between same-type siblings.

Analysis

Performance Notes

ApproachCostBest for
$("li:nth-last-of-type(n)")Native CSS when possibleSame-tag positions from the end
$("li:last-of-type")Simpler selectorLast of that tag only
$("li:nth-last-child(n)")Native CSS when possibleStrict child slots among all tags

Prefer the selector that matches your tree model. Wrong of-type vs child choices cause silent misses more often than performance issues.

Remember

Key Takeaways

  • Role: nth same-tag sibling, counted from the end.
  • (1): same as :last-of-type.
  • Not last-child: other tags do not shift of-type indexes.
  • From the start: use :nth-of-type().

One line: $("li:nth-last-of-type(n)") means “the nth li from the end among li siblings.”

Frequently Asked Questions

:nth-last-of-type(index) selects elements that are the nth sibling of their tag name when counting backward from the last same-type sibling. $("li:nth-last-of-type(2)") matches the second-to-last li under each parent — counting only li elements.
:nth-last-child() counts every sibling element. :nth-last-of-type() counts only siblings with the same tag name. Mixed markup (span next to p) is where they diverge.
Yes. Both select the last element of that tag name among siblings under the same parent.
Yes. Per CSS and jQuery docs, counting starts at 1 from the last same-type sibling. li:nth-last-of-type(1) is the last li.
Official docs support :nth-last-of-type(even), odd, 3n, and 3n+1 — evaluated among same-tag siblings from the end, ignoring other element types.
jQuery 1.9. It follows the W3C CSS specification and works via querySelectorAll in modern browsers.

Next: :only-of-type

Select elements that are the only sibling of their element type.

:only-of-type tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

jQuery :last-of-type Selector jQuery :only-of-type Selector