jQuery: Select the Last Child Element (.last, :last)

To select the last child element with jQuery, use $('.parent').children().last() for the last child of any type, or $('.parent p').last() for the last  specifically. The selectors :last and :last-child do similar but subtly different things — pick by the case below.

Contents

The three equivalent forms
When the choice actually matters
Use it to do something
Vanilla JS equivalent
Frequently asked questions
Related guides
References

Last verified: 2026-05-17 with jQuery 3.7. Originally published 2022-09-17, rewritten and updated 2026-05-17.

The three equivalent forms

<div class="article">
  <p>Some random text 1</p>
  <p>Some random text 2</p>
  <!-- ... -->
  <p>Some random text 6</p>
</div>

// Children — method form (recommended)
$('.article').children().last();

// :last — jQuery extension
$('.article p:last');

// :last-child — CSS pseudo-class
$('.article p:last-child');

All three return the last  in the example. The differences matter when the DOM gets messier — see below.

jQuery select last child — .last(), :last, :last-child, :last-of-type compared

When the choice actually matters

<div class="article">
  <p>Some random text 1</p>
  <p>Some random text 2</p>
  <p>Some random text 3</p>
  <footer>Last footer</footer>   <!-- last child of .article -->
</div>

$('.article p').last() → “Some random text 3” (last , regardless of position)
$('.article p:last') → “Some random text 3” (same — :last on the matched set)
$('.article p:last-child') → nothing (no  is the literal last child of .article; the <footer> is)
$('.article p:last-of-type') → “Some random text 3” (last  among its siblings of the same type)

If you want “the last  regardless of what comes after,” reach for .last() or :last-of-type — not :last-child.

Use it to do something

// Add a class
$('.article p').last().addClass('final');

// Read its text
const lastPara = $('.article p').last().text();

// Append something after it
$('.article p').last().after('<p class="footnote">See references.</p>');

Vanilla JS equivalent

// Last  inside .article
document.querySelector('.article p:last-of-type');

// Or by collecting all and taking the last index
const paras = document.querySelectorAll('.article p');
const last  = paras[paras.length - 1];

// Last child element of any type
document.querySelector('.article').lastElementChild;

Frequently asked questions

What’s the difference between :last and :last-child?

:last is a jQuery extension that picks the last element from the matched set. :last-child is a standard CSS pseudo-class — it matches an element only if it’s the last child of its parent. For .article p:last vs .article p:last-child: if the last child of .article isn’t a , :last-child matches nothing, but :last still returns the last . Subtle and surprising — usually you want :last.

Is :last slower than :last-child?

Yes — :last-child is a native CSS selector that the browser optimises (it uses document.querySelectorAll internally). :last requires jQuery to fetch every match and pick the last, so it can’t be passed to the browser’s native selector engine. For most pages the difference is negligible; on large DOMs with thousands of matches it can matter.

How do I select the last matching element, not just the literal last child?

Use .last(): $('.article p').last() grabs the last  inside .article, regardless of whether it’s the literal last child. Pairs cleanly with .first() for symmetry. :last selector and .last() method are equivalent.

What’s the native JavaScript way?

document.querySelector('.article p:last-of-type') for “the last  inside .article” — same idea as jQuery’s :last-of-type. Or document.querySelectorAll('.article p') followed by nodes[nodes.length - 1]. Both are widely supported, no library needed.