jQuery :nth-last-of-type() Selector

What You’ll Learn

The :nth-last-of-type() selector matches elements by reverse position among same-tag siblings — not among every child. Available since jQuery 1.9; counting is 1-based from the last element of that type. Ideal when mixed markup (spans, paragraphs, headings) breaks plain :nth-last-child() rules.

Introduction

Real pages mix element types inside one container — a <div> with spans, paragraphs, and headings. Selectors like :nth-last-child() count every sibling, so a footer <p> can shift indexes for spans above it. :nth-last-of-type() fixes that by counting only among siblings that share the same tag name.

jQuery has supported this selector since version 1.9. Official docs describe it as selecting the nth child in relation to siblings with the same element name, counting from the last element backward — still 1-indexed, like other CSS nth- pseudo-classes.

Understanding the :nth-last-of-type() Selector

Read p:nth-last-of-type(2) as: “Among all p siblings under this parent, select the one that is second from the bottom.” A trailing h3 or span does not affect the count — only other p elements do.

• span:nth-last-of-type(1) → last span, even if a p follows it.
• li:nth-last-of-type(2) → penultimate li (official demo).
• p:nth-last-of-type(even) → even-position paragraphs from the bottom among p only.
• li:nth-last-of-type(3n) → every 3rd li from the end by type index.

📝 Syntax

Official jQuery API form (since 1.9):

jQuery( ":nth-last-of-type(index/even/odd/equation)" )

// fixed reverse index among same tag (1-based):
$( "ul li:nth-last-of-type(2)" )     // 2nd-to-last li
$( "span:nth-last-of-type(1)" )      // last span (= :last-of-type)

// keywords and equations (among same type only):
$( "p:nth-last-of-type(even)" )
$( "p:nth-last-of-type(odd)" )
$( "li:nth-last-of-type(3n)" )
$( "li:nth-last-of-type(3n+1)" )

Parameters

• index — positive integer from the last same-type sibling, even/odd, or an An+B CSS equation.

Return value

• A jQuery object containing every element matching the tag and reverse nth-of-type rule within its parent.
• Can match multiple elements when several parents each qualify.

Official jQuery API example

// Find the second-to-last li in each matched ul and note it
$( "ul li:nth-last-of-type(2)" ).append( " - 2nd to last! " );

Examples Gallery

Example 1 follows the official jQuery demo. Examples 2–5 cover last-of-type equivalence, the key difference from :nth-last-child(), reverse even stripes among paragraphs, and 3n tail patterns. Use Try-it links to run each snippet.

$( "ul li:nth-last-of-type(2)" ).append( " - 2nd to last! " );

// Counts only li siblings — same result as nth-last-child(2) in pure li lists

First ul: "Adam - 2nd to last!"
Single-li ul: no match
Third ul: "Timmy - 2nd to last!"

$( "span:nth-last-of-type(1)" ).addClass( "last" );

// Same as:
// $( "span:last-of-type" ).addClass( "last" );

"Gamma" highlighted — last span
Footer p does not prevent the match

$( "span:nth-last-of-type(1)" ).addClass( "of-type" );   // Span B

$( "span:nth-last-child(1)" ).addClass( "of-child" );     // no match

// p is last child — span fails nth-last-child(1)

nth-last-of-type(1) → Span B (blue outline)
nth-last-child(1) on span → no match

$( "p:nth-last-of-type(even)" ).css( "background", "#dbeafe" );

// Only p siblings count — h3 between paragraphs is ignored

Even-position paragraphs from bottom highlighted blue
Heading between paragraphs does not shift p indexes

$( "li:nth-last-of-type(3n)" ).addClass( "mark" );

// Also explore :nth-last-of-type(3n+1) and (3n+2) in the playground

Items at reverse positions 3, 6, 9 among li siblings highlighted
Pure li lists behave like nth-last-child(3n)

🚀 Common Use Cases

• Last paragraph — p:nth-last-of-type(1) when a footer div follows.
• Penultimate list item — li:nth-last-of-type(2) in mixed-content lists.
• Article stripes — p:nth-last-of-type(even) with headings between paragraphs.
• Table columns by tag — reverse patterns on repeated td groups.
• Card grids — div:nth-last-of-type(3n) when each card shares a wrapper tag.
• Official playground — click :nth-last-of-type buttons to preview table rows.

📝 Notes

• Available since jQuery 1.9 — follows the W3C CSS specification strictly.
• Counting is 1-indexed from the last same-type sibling.
• :last-of-type equals :nth-last-of-type(1) for a given tag.
• Only siblings with the same tag name participate — unlike :nth-last-child().
• Official docs use the same even, odd, and An+B syntax as other nth- selectors.
• Native querySelectorAll("p:nth-last-of-type(2)") works in modern browsers.

💡 Best Practices