jQuery :nth-last-child() Selector

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

What Is :nth-last-child()?

:nth-last-child(index) selects elements that are the nth child of their parent, counting from the last sibling. Counting is 1-based (CSS) and includes every sibling element. Available since jQuery 1.9.

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

$("li:nth-last-child(1)")     → last child (≡ :last-child)
$("li:nth-last-child(2)")     → second-to-last child
$("li:nth-last-child(even)")  → even positions from the end
$("li:nth-last-child(3n)")    → 3rd, 6th… from the end

$("li:nth-child(2)")          → 2nd from the start
$("li").eq(-1)                → last in a flat jQuery set
UsePrefer
Nth from the end$("li:nth-last-child(2)")
Nth from the start$("li:nth-child(2)")
Last child only$("li:last-child")
Approach

How to Use :nth-last-child()

Attach the pseudo-class to a tag or class, then pass an index, keyword, or equation — counted from the end.

  1. Choose the element type you care about (li, tr, and so on).
  2. Pass a 1-based index from the end, even/odd, or an An+B equation.
  3. Remember: all siblings count — not only matching tags.
  4. Use :nth-child() if you need positions from the start instead.
PieceRequired?Role
Base selectorUsuallyElement that must match at that child slot
:nth-last-child(…)YesChild-position filter from the end
ArgumentYesIndex, even/odd, or equation

Pseudocode

Pseudocode
for each element E matching base:
    parent = E.parent
    indexFromEnd = 1-based position counting backward
                   among parent's children
    if indexFromEnd matches (n | even | odd | An+B):
        keep E

return jQuery(kept)
Reference

Cheat Sheet

Keep these facts handy while counting from the end.

TopicDetail
Syntax$(":nth-last-child(n | even | odd | An+B)")
Counting1-based from the last sibling
(1)Same as :last-child
(2)Second-to-last child
vs :nth-child()End → start vs start → end
SincejQuery 1.9 (CSS)
Try it

Live Preview

Pick an :nth-last-child() pattern against two short lists and see which items match.

Two lists — matches can appear once per parent, like the official demo.

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

/* 1-based position counting 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-child(2)

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

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

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

How It Works

  1. Scan each list. Every ul has its own child positions from the end.
  2. Require index 2 from the end. The penultimate child is the candidate.
  3. Require an li. That child must also be a list item.
  4. Append a note. Official demo style: add - 2nd to last!.

Example 2 — Last Child: :nth-last-child(1) ≡ :last-child

Show that index 1 from the end is the last child.

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

var b = $("ul li:last-child").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 slot is always the last child.
  2. Compare with :last-child. Same nodes on the same markup.
  3. Prefer the short form. Use :last-child when you only need the last item.
  4. Reach further. Use :nth-last-child(2), (3), … for deeper positions.

Example 3 — Even / Odd from the End

Stripe by child position counted backward inside each parent.

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

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

How It Works

  1. Count backward. Last child is position 1 (odd); second-to-last is 2 (even).
  2. Even from the end. Positions 2, 4, 6… match even.
  3. Odd from the end. Positions 1, 3, 5… match odd.
  4. Per parent. Pattern restarts in every list.

Example 4 — Equations from the End: 3n

Use An+B patterns from the official playground, counted from the tail.

jQuery
console.log("3n:", $("ul li:nth-last-child(3n)").map(function () {
  return this.textContent.trim();
}).get().join(", "));

console.log("3n+1:", $("ul li:nth-last-child(3n+1)").map(function () {
  return this.textContent.trim();
}).get().join(", "));
Try It Yourself

How It Works

  1. Same formula as CSS. An+B works; only the direction flips.
  2. 3n. Positions 3, 6, 9… counted from the last child.
  3. 3n+1. Positions 1, 4, 7… from the end (includes the last child).
  4. Official playground. Docs demo these strings on table rows too.

Example 5 — :nth-last-child() vs :nth-child()

Same index number, opposite ends of the sibling list.

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

var fromStart = $("ul li:nth-child(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. Last-child direction. :nth-last-child(2) walks backward.
  2. First-child direction. :nth-child(2) walks forward.
  3. Same lists, different picks. Adam/Timmy vs Karl/Rick on the demo markup.
  4. Pick by intent. Near the end → last; near the start → :nth-child().

Edge Cases & Pitfalls

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

count

All siblings count, not only matching tags

If the last child is not an li, li:nth-last-child(1) matches nothing — the last slot is the wrong type.

index

1-based from the end

Official docs: :nth-last-child(1) is last. Do not mix with .eq(-1) mental models without checking.

direction

(2) ≠ second from the start

:nth-last-child(2) is penultimate. For the second item from the top, use :nth-child(2).

type

Need “nth of this type from the end”?

When other tags sit between items, consider :nth-last-of-type().

Compatibility

Browser Support

:nth-last-child() 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-child()

Supported in all modern browsers. Native: document.querySelectorAll("li:nth-last-child(2)"). 1-based counting 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-child() Universal

Bottom line: Safe everywhere modern jQuery runs. Remember 1-based indexes from the last sibling — and that all siblings count.

Analysis

Performance Notes

ApproachCostBest for
$("li:nth-last-child(n)")Native CSS when possiblePositions from the end
$("li:last-child")Simpler selectorLast child only
$("li:nth-child(n)")Native CSS when possiblePositions from the start

Prefer the shortest selector that matches your intent. Use :last-child when you only need the final sibling.

Remember

Key Takeaways

  • Role: match by 1-based child position counting from the end.
  • (1): same as :last-child.
  • Mirror of nth-child: same formulas, opposite direction.
  • By type from the end: see :nth-last-of-type().

One line: $("li:nth-last-child(n)") means “the nth child from the end — if that child is an li.”

Frequently Asked Questions

:nth-last-child(index) selects elements that are the nth child of their parent when counting from the last sibling backward. $("li:nth-last-child(2)") matches the second-to-last li in each list — if that li occupies that child slot.
Yes. Like :nth-child(), counting is 1-indexed per CSS. :nth-last-child(1) is the last child; :nth-last-child(2) is the penultimate child.
Yes. Both select an element that is the last child of its parent. Use :nth-last-child() when you need positions further from the end.
:nth-child(n) counts from the first sibling forward; :nth-last-child(n) counts from the last sibling backward. Same formula syntax, opposite direction.
Official docs support :nth-last-child(even), odd, 3n, and 3n+1 — the same An+B formulas as :nth-child(), evaluated from the end of each parent's child list.
jQuery 1.9. It follows the W3C CSS specification and works via querySelectorAll in modern browsers.

Next: :first-of-type

Select the first element of its type among siblings with :first-of-type.

:first-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)

9 people found this page helpful

jQuery :nth-child() Selector jQuery :first-of-type Selector