jQuery :last-of-type Selector

What You’ll Learn

The :last-of-type selector matches every element that is the last of its tag name among siblings. It can return multiple nodes — one per parent. Standard CSS since jQuery 1.9; equivalent to :nth-last-of-type(1).

Introduction

Real markup mixes element types — spans in a name list, then a trailing paragraph or footer note. You often need the last <span> or last <p> in each block, even when another tag is the overall last child. The CSS :last-of-type pseudo-class selects by element name among siblings, not absolute child position.

jQuery supports :last-of-type in selector strings since version 1.9. Official documentation states that it matches elements with no other element of the same name and parent coming after them in the document tree — so $("span:last-of-type") can match many spans, one per parent.

Understanding the :last-of-type Selector

Think of :last-of-type as “the last sibling of this tag name under each parent”:

• <div><span>A</span><span>B</span></div> → last span matches span:last-of-type.
• Second <div> with its own last span → also matches.
• <div><span>…</span><p>…</p></div> → span matches span:last-of-type but not span:last-child.
• Equivalent to :nth-last-of-type(1) in standard CSS.

📝 Syntax

Official jQuery API form (since 1.9):

jQuery( ":last-of-type" )

// typical usage — prefix with element:
$( "span:last-of-type" )
$( "article p:last-of-type" )
$( "tr td:last-of-type" )

// equivalent:
$( "h2:nth-last-of-type(1)" )

Parameters

• No arguments — matches elements that are the last of their element type among siblings.

Return value

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

Official jQuery API example

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

Examples Gallery

Example 1 follows the official jQuery span:last-of-type demo. Examples 2–5 contrast with :last-child, style article closing paragraphs, verify :nth-last-of-type(1), and highlight the last table column.

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

Corey, Yehuda, Adam, Todd, → Todd red 80% (hover: solast line-through)
Nobody, Jörn, Scott, Timo, → Timo red 80% (hover: solast line-through)
Other spans → default styling

$( "span:last-of-type" ).addClass( "lot" );
$( "span:last-child" ).addClass( "lc" );

console.log( ":last-of-type →", $( "span:last-of-type" ).length );
console.log( ":last-child →", $( "span:last-child" ).length );

:last-of-type → 1 (Trailing span highlighted)
:last-child → 0 (p is last child — no span match)

$( "article p:last-of-type" ).css({
  fontStyle: "italic",
  color: "#64748b"
});

Last p in each article → italic slate text
Earlier paragraphs → default styling

console.log( ":last-of-type →", $( "li:last-of-type" ).length );
console.log( ":nth-last-of-type(1) →", $( "li:nth-last-of-type(1)" ).length );

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

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

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

🚀 Common Use Cases

• Closing paragraphs — article p:last-of-type for summary or sign-off text.
• Inline name lists — official pattern with span:last-of-type.
• Section footers — section p:last-of-type when markup mixes tags.
• Tables — highlight td:last-of-type action or total columns.
• Definition lists — style the last dt or dd in each group.
• CSS parity — same selector works in stylesheets and jQuery.

📝 Notes

• Available since jQuery 1.9 — standard CSS pseudo-class.
• Equivalent to :nth-last-of-type(1) — standard CSS specification.
• Can match multiple elements — one last-of-type per parent for the chosen tag.
• Differs from :last-child when siblings of other element types follow the target.
• Works in native querySelectorAll — no jQuery extension caveat.
• Always pair with an element type — p:last-of-type, not bare :last-of-type on large pages.

💡 Best Practices