jQuery :last-child Selector

What Is :last-child?

:last-child (since jQuery 1.1.4) selects every element that is the last child of its parent. Unlike .last(), which returns one element from a set, :last-child can match one per parent.

// Official pattern — last span in each div
$("div span:last-child");

// Last list item in each ul
$("ul li:last-child");

// Same idea as :nth-last-child(1)
$("p:nth-last-child(1)");

// Not the same as .last() (one element only)
$("li").last();

How to Use :last-child

Scope the selector, then style or read the matched last children.

1. Write a typed selector such as $("li:last-child") or $("div span:last-child").
2. Optionally scope with a parent: $("ul.nav li:last-child").
3. Chain methods — .text(), .addClass(), .css(), events.
4. Remember: the element must be the final element child of its parent.
5. Use .last() only when you want one match from the whole set.

Pseudocode

for each element matching the left side (e.g. span):
    look at its parent
    if this element is the last element child of that parent:
        include it in the result

result may contain many elements
    → one match is possible for each parent

.compare with .last():
    take the full matched set
    keep only the final item in that set
    → always 0 or 1 element

Cheat Sheet

Keep these facts handy while selecting last children.

Live Preview

Mark the last child in each list, compare with .last(), or count matches.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Use Try It Yourself for a live editor.

$("div span:last-child").text(function (i, text) {
  return "[last] " + text;
});

John, Karl, Brandon, [last] Sam
Glen, Tane, Ralph, [last] David

$("li:last-child").text(function (i, t) {
  return t + " (last-child)";
});
$("li").last().text(function (i, t) {
  return t + " [.last()]";
});

$("#out").text(
  ":last-child → " + $("li:last-child").length +
  " | .last() → " + $("li").last().length
);

:last-child → 2 (one per list)
.last() → 1 (single element)

$("ul.nav li:last-child").text(function (i, t) {
  return t + " ← last";
});

Home / About / Contact ← last
Dashboard / Reports / Settings ← last

$("#out").text(
  ":last-child → " + $("div p:last-child").length +
  " | :nth-last-child(1) → " + $("div p:nth-last-child(1)").length
);

:last-child → 2 | :nth-last-child(1) → 2

$("tr td:last-child").text(function (i, t) {
  return t + " *";
});

Ada | 28 | London *
Ben | 34 | Paris *

Performance Notes

Child filters are fast when scoped. Start from a known parent when the page is large.

Key Takeaways