jQuery :last-child Selector

What You’ll Learn

The :last-child selector matches every element that is the last child of its parent. Unlike .last(), it can return multiple nodes — one per parent. Standard CSS since jQuery 1.1.4; equivalent to :nth-last-child(1).

Introduction

Layout patterns often treat the last item in a group differently — remove trailing margin on the final nav link, emphasize the closing name in a list, or align the rightmost column in a table. The CSS :last-child pseudo-class selects those elements based on sibling position within each parent.

jQuery supports :last-child in selector strings since version 1.1.4. Official documentation emphasizes that while .last() matches only a single element, :last-child can match more than one — one for each parent in the document.

Understanding the :last-child Selector

Think of :last-child as “the final sibling under each parent”:

• <div><span>A</span><span>B</span></div> → last span matches span:last-child.
• Second <div> with its own last span → also matches.
• <div><span>…</span><p>…</p></div> → span is not last child — no match for span:last-child.
• Equivalent to :nth-last-child(1) per official jQuery docs.

📝 Syntax

Official jQuery API form (since 1.1.4):

jQuery( ":last-child" )

// typical usage — prefix with element:
$( "div span:last-child" )
$( "ul.nav li:last-child" )
$( "tr td:last-child" )

// equivalent:
$( "p:nth-last-child(1)" )

Parameters

• No arguments — matches elements that are the last child of their parent.

Return value

• A jQuery object containing every matching last-child element (often multiple).
• Empty collection when no element is a last child in scope.

Official jQuery API example

$( "div span:last-child" )
  .css({ color: "red", fontSize: "80%" })
  .hover( function() {
    $( this ).addClass( "solast" );
  }, function() {
    $( this ).removeClass( "solast" );
  });

Examples Gallery

Example 1 follows the official jQuery div span:last-child demo. Examples 2–5 contrast with .last(), style navigation lists, verify :nth-last-child(1), and highlight table columns.

$( "div span:last-child" )
  .css({ color: "red", fontSize: "80%" })
  .hover( function() {
    $( this ).addClass( "solast" );
  }, function() {
    $( this ).removeClass( "solast" );
  });

Sam and David → red, 80% font size
Hover → solast class (line-through)
John, Karl, Brandon, Glen, Tane, Ralph → unchanged

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

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

:last-child → 2 (A3 and B3 highlighted)
.last() → 1 (only B3 outlined)

$( "ul.nav li:last-child" ).css({
  fontWeight: "bold",
  color: "#2563eb"
});

Contact and Settings → bold blue
Other items → default styling

console.log( ":last-child →", $( "p:last-child" ).length );
console.log( ":nth-last-child(1) →", $( "p:nth-last-child(1)" ).length );

:last-child → 2
:nth-last-child(1) → 2 (identical matched set)

$( "tr td:last-child" ).css({
  backgroundColor: "#f1f5f9",
  fontWeight: "bold"
});

City, 28, London columns (last td per row) → gray + bold
Name and Age columns → unchanged

🚀 Common Use Cases

• Navigation — style li:last-child as the contact or settings link.
• Inline name lists — official demo pattern with span:last-child.
• Tables — highlight td:last-child action or value columns.
• Card grids — remove right margin on .card:last-child per row wrapper.
• Form rows — style submit buttons that are the last child in a field group.
• CSS parity — same selector works in stylesheets and jQuery.

📝 Notes

• Available since jQuery 1.1.4 — standard CSS pseudo-class.
• Equivalent to :nth-last-child(1) — official jQuery documentation.
• Can match multiple elements — unlike .last() which returns one.
• Element must be the last child of its parent — trailing siblings block a match.
• Works in native querySelectorAll — no jQuery extension caveat.
• Not the same as :last-of-type — that ignores siblings of other tag names.

💡 Best Practices