jQuery :last Selector

What You’ll Learn

The :last selector matches exactly one element — the last in the matched set, in document order. Equivalent to :eq(-1). jQuery extension since 1.0; deprecated in 3.4 — prefer the .last() method.

Introduction

When you have many matching elements — table rows, list items, or cards — you often need only the last one in document order. The jQuery :last pseudo-class narrows a matched set to that single trailing element.

jQuery has supported :last since version 1.0. Official documentation states it selects the last matched DOM element and is equivalent to :eq(-1). As of jQuery 3.4, the selector is deprecated — use .last() on a CSS-selected collection instead.

Understanding the :last Selector

Think of :last as “keep only the final index from this matched set”:

• $("tr:last") → one row — the last tr in document order.
• $("li:last") → one list item — the very last li on the page (in scope).
• Equivalent to :eq(-1) per official jQuery docs.
• Not the same as :last-child — that can match one element per parent.

📝 Syntax

Official jQuery API form (since 1.0; deprecated 3.4):

jQuery( ":last" )



// typical usage — prefix with element:

$( "tr:last" )

$( "ul.nav li:last" )

$( "div.card:last" )



// equivalents:

$( "tr:eq(-1)" )



// modern replacement (jQuery 3.4+ guidance):

$( "tr" ).last()

Parameters

• No arguments — keeps the last element from the matched set that precedes :last.

Return value

• A jQuery object containing zero or one element.
• Empty collection when the preceding selector matched nothing.

Official jQuery API example

$( "tr:last" ).css({

  backgroundColor: "yellow",

  fontWeight: "bolder"

});

Examples Gallery

Example 1 follows the official jQuery tr:last demo. Examples 2–5 cover equivalence with :eq(-1), migration to .last(), contrast with :last-child, and scoped list selection.

$( "tr:last" ).css({

  backgroundColor: "yellow",

  fontWeight: "bolder"

});

First Row, Middle Row → normal styling

Last Row → yellow background, bold text

console.log( ":last →", $( "li:last" ).text() );

console.log( ":eq(-1) →", $( "li:eq(-1)" ).text() );

console.log( "Same element?", $( "li:last" ).is( $( "li:eq(-1)" )[0] ) );

:last → Gamma

:eq(-1) → Gamma

Same element? true

// legacy (deprecated selector):

// $( "tr:last" ).css({ backgroundColor: "yellow", fontWeight: "bolder" });



// recommended:

$( "tr" ).last().css({

  backgroundColor: "yellow",

  fontWeight: "bolder"

});

Last Row → yellow bold (same visual result as tr:last)

Uses pure CSS tr selector, then .last() — not deprecated

$( "li:last" ).addClass( "one" );

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



console.log( ":last →", $( "li:last" ).length );

console.log( ":last-child →", $( "li:last-child" ).length );

:last → 1 (only B3 outlined)

:last-child → 2 (A3 and B3 highlighted)

$( "ul.nav li:last" ).css({

  fontWeight: "bold",

  color: "#2563eb"

});

Settings → bold blue (last li in ul.nav)

Home in second nav list → unchanged

Other items → default styling

🚀 Common Use Cases

• Table footers — style tr:last or tfoot tr:last for emphasis.
• Trailing list item — highlight the last entry in a flat collection with li:last.
• Last card in a grid — .card:last for featured layout (legacy code).
• Legacy maintenance — understand :last when reading older jQuery projects.
• Migration — replace with $("selector").last() in modern codebases.
• Performance — select with CSS first, then .filter(":last") or .last().

📝 Notes

• Available since jQuery 1.0 — deprecated in 3.4; prefer .last().
• Equivalent to :eq(-1) — official jQuery documentation.
• Matches only one element — unlike :last-child which can match many.
• jQuery extension — not valid in native querySelectorAll.
• For performance, use a pure CSS selector first, then .filter(":last") or .last().
• Do not confuse with CSS :last-child or :last-of-type — different rules entirely.

💡 Best Practices