jQuery :nth-of-type() Selector

What You’ll Learn

The :nth-of-type() selector matches elements by forward position among same-tag siblings — the general form of :first-of-type. Available since jQuery 1.9; counting is 1-based. Pick the second span, stripe every other paragraph, or mark group starts with 3n+1 — even when headings sit between blocks.

Introduction

After learning :first-of-type and :last-of-type, you often need positions in between — the second span in a row of names, every other paragraph in an article, or the first item in each repeating group. CSS provides :nth-of-type() for that, and jQuery has supported it since version 1.9.

The selector counts only among siblings that share the same element name (tag). A heading or paragraph of a different type does not shift the index for spans. Official docs describe it as the nth child in relation to siblings with the same element name — still 1-indexed per the CSS specification.

Understanding the :nth-of-type() Selector

Read span:nth-of-type(2) as: “Among all span siblings under this parent, select the second one.” Other tags in the same parent are ignored for counting purposes.

• span:nth-of-type(1) → same as :first-of-type for spans.
• span:nth-of-type(2) → second span (Kim, Ann, Richard in the official demo).
• p:nth-of-type(even) → even-position paragraphs among p only.
• li:nth-of-type(3n+1) → 1st, 4th, 7th list items of type li.

📝 Syntax

Official jQuery API form (since 1.9):

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

// fixed forward index among same tag (1-based):
$( "span:nth-of-type(2)" )
$( "p:nth-of-type(1)" )       // = :first-of-type for p

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

Parameters

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

Return value

• A jQuery object containing every element matching the tag and nth-of-type rule within its parent.
• Multiple matches when several parents each contain a qualifying element.

Official jQuery API example

// Find each span that is second in relation to its sibling spans
$( "span:nth-of-type(2)" )
  .append( " is 2nd sibling span " )
  .addClass( "nth" );

Examples Gallery

Example 1 follows the official jQuery demo. Examples 2–5 cover first-of-type equivalence, the difference from :nth-child(), paragraph stripes, and 3n+1 group patterns. Use Try-it links to run each snippet live.

$( "span:nth-of-type(2)" )
  .append( " is 2nd sibling span " )
  .addClass( "nth" );

Kim, Ann, Richard styled red with appended label
Other spans unchanged
Evaluated per parent div

$( "p:nth-of-type(1)" ).addClass( "lead" );

// Same as:
// $( "p:first-of-type" ).addClass( "lead" );

First paragraph gets .lead styling
Heading above does not block the match

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

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

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

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

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

// Paragraphs 2 and 4 highlighted — h3 ignored in p index

Paragraphs 2 and 4 — blue background
Subheading between paragraphs ignored for p counting

$( "li:nth-of-type(3n+1)" ).addClass( "lead" );

// An+B syntax — same grammar as :nth-child() but type-scoped

Items 1, 4, 7 — green lead border
Repeating 3-item cycle visually marked

🚀 Common Use Cases

• Second label — span:nth-of-type(2) in name lists (official demo).
• Lead paragraph — p:nth-of-type(1) after a section heading.
• Article stripes — p:nth-of-type(even) with headings between blocks.
• Grouped lists — li:nth-of-type(3n+1) for cycle starts.
• Table columns — td:nth-of-type(2) for second column cells by type.
• Mixed markup — prefer of-type over nth-child when sibling tags differ.

📝 Notes

• Available since jQuery 1.9 — follows the W3C CSS specification strictly.
• Counting is 1-indexed among same-type siblings.
• :first-of-type equals :nth-of-type(1) for a given tag.
• Only siblings with the same tag name participate — unlike :nth-child().
• Class names and IDs do not affect of-type counting — only element names matter.
• Native querySelectorAll("span:nth-of-type(2)") uses identical syntax in modern browsers.

💡 Best Practices