jQuery :last-of-type Selector

What Is :last-of-type?

:last-of-type (since jQuery 1.9) selects every element that is the last among siblings of the same tag name. Unlike :last-child, a different tag after it does not block the match.

// Official pattern — last span among siblings
$("span:last-of-type");

// Last paragraph in each article
$("article p:last-of-type");

// Same idea as :nth-last-of-type(1)
$("li:nth-last-of-type(1)");

// Stricter: must also be the final child
$("span:last-child");

How to Use :last-of-type

Scope the selector, then style or read the matched last-of-type elements.

1. Write a typed selector such as $("span:last-of-type") or $("p:last-of-type").
2. Optionally scope with a parent: $("article p:last-of-type").
3. Chain methods — .text(), .addClass(), .css(), events.
4. Remember: only siblings with the same tag are compared.
5. Use :last-child when the element must also be the final child.

Pseudocode

for each element matching the left side (e.g. span):
    look at its parent
    find all siblings with the same tag name
    if this element is the last of those siblings:
        include it in the result

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

.compare with :last-child:
    the element must also be the final child
    of any tag type under that parent

Cheat Sheet

Keep these facts handy while selecting last-of-type elements.

Live Preview

Mark last-of-type spans, compare with :last-child, or count matches.

Ready — pick an action and click Run.

jQuery Examples

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

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

Corey, Yehuda, Adam, [last] Todd
Nobody, Jörn, Scott, [last] Timo

$("span:last-of-type").text(function (i, t) {
  return t + " (of-type)";
});
$("span:last-child").text(function (i, t) {
  return t + " (last-child)";
});

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

:last-of-type → 1 (Beta)
:last-child → 0 (p is last child)

$("article p:last-of-type").text(function (i, t) {
  return t + " ← closing";
});

Opening… / Closing… ← closing
Intro… / Final thoughts… ← closing

$("#out").text(
  ":last-of-type → " + $("ul li:last-of-type").length +
  " | :nth-last-of-type(1) → " + $("ul li:nth-last-of-type(1)").length
);

:last-of-type → 2 | :nth-last-of-type(1) → 2

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

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

Performance Notes

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

Key Takeaways