jQuery :nth-last-child() Selector

What You’ll Learn

The :nth-last-child() selector is the mirror of :nth-child(): it matches elements by position counting backward from the last sibling. Available since jQuery 1.9; indexing is 1-based from the end. Pick the penultimate row, style the last child, or apply even/odd patterns from the bottom up.

Introduction

Sometimes you care about items near the bottom of a list — the second-to-last table row, the final nav link, or every third item counting backward. CSS provides :nth-last-child() for exactly that, and jQuery has supported it since version 1.9.

The counting model matches :nth-child() but reverses direction: 1 means the last child, 2 means second-to-last, and so on. Official docs note that given three li elements, li:nth-last-child(1) selects the third (last) item — still 1-indexed, just measured from the tail.

Understanding the :nth-last-child() Selector

Read li:nth-last-child(2) as: “Select every li that is the second child counting backward from the end of its parent.” All sibling element types count toward the index — not only li nodes.

• li:nth-last-child(1) → same as :last-child when the li is the last child.
• li:nth-last-child(2) → penultimate child (official demo).
• tr:nth-last-child(even) → even positions from the bottom within each parent.
• li:nth-last-child(3n) → every 3rd item from the end (official playground).

📝 Syntax

Official jQuery API form (since 1.9):

jQuery( ":nth-last-child(index/even/odd/equation)" )

// fixed index from the end (1-based):
$( "ul li:nth-last-child(2)" )    // second-to-last
$( "li:nth-last-child(1)" )       // last child

// keywords and equations:
$( "tr:nth-last-child(even)" )
$( "tr:nth-last-child(odd)" )
$( "li:nth-last-child(3n)" )
$( "li:nth-last-child(3n+1)" )
$( "li:nth-last-child(3n+2)" )

Parameters

• index — positive integer from the last child (1 = last), even/odd, or an An+B CSS equation.

Return value

• A jQuery object with every element matching the base selector and the reverse nth-child rule within its parent.
• Multiple matches when several parents each contain a qualifying child.

Official jQuery API example

// Find the second-to-last li in each matched ul and note it
$( "ul li:nth-last-child(2)" ).append( " - 2nd to last! " );

Examples Gallery

Example 1 follows the official jQuery demo. Examples 2–5 cover last-child equivalence, reverse even stripes, 3n from the tail, and a side-by-side comparison with :nth-child(). Open Try-it labs to experiment live.

$( "ul li:nth-last-child(2)" ).append( " - 2nd to last! " );

// Evaluated per ul — lists with fewer than 2 items do not match

First ul: "Adam - 2nd to last!"
Single-li ul (Dan): no match
Third ul: "Timmy - 2nd to last!"

$( "li:nth-last-child(1)" ).addClass( "last" );

// Same idea as:
// $( "li:last-child" ).addClass( "last" );

"Last item" receives .last styling
Only the final li matches

$( "tr:nth-last-child(even)" ).css( "background", "#dbeafe" );

// Differs from :nth-child(even) when row order matters from the tail

Rows at even positions from the bottom highlighted
Pattern anchored to the table tail

$( "li:nth-last-child(3n)" ).addClass( "mark" );

// Also try :nth-last-child(3n+1) and :nth-last-child(3n+2) in the playground

Items 3, 6, 9 from the end highlighted
Different set than li:nth-child(3n)

$( "#list li:nth-child(2)" ).addClass( "from-start" );      // B
$( "#list li:nth-last-child(2)" ).addClass( "from-end" );    // D

// .eq(-2) selects from a flat jQuery set — yet another model

nth-child(2) → B (blue outline)
nth-last-child(2) → D (orange outline)

🚀 Common Use Cases

• Penultimate row — tr:nth-last-child(2) before a footer row.
• Last item styling — li:nth-last-child(1) without a separate :last-child rule.
• Bottom-anchored stripes — tr:nth-last-child(even) when rows prepend at the top.
• Repeating tail groups — li:nth-last-child(3n+1) for cycles from the end.
• Nav menus — highlight second-to-last link with li:nth-last-child(2).
• Official playground — click :nth-last-child buttons to preview table patterns.

📝 Notes

• Available since jQuery 1.9 — follows the W3C CSS specification strictly.
• Counting is 1-indexed from the last child; :nth-last-child(1) equals :last-child.
• All sibling element types count — not only elements matching the base selector tag.
• Official docs distinguish this from .eq(), which uses 0-based indexing on a flat matched set.
• :nth-last-child(even) and :nth-child(even) can highlight different rows in the same table.
• Native querySelectorAll("li:nth-last-child(2)") uses identical syntax in modern browsers.

💡 Best Practices