jQuery :nth-of-type() Selector

Beginner

7 min read

Updated: Oct 2026

5 examples

Live preview

Definition

What Is `:nth-of-type()`?

:nth-of-type(index) selects elements that are the nth sibling of their tag name under the same parent. Other tags between them do not change the count. Available since jQuery 1.9.

Remember

$(":nth-of-type(index | even | odd | equation)")

$("span:nth-of-type(1)")     → first span (≡ :first-of-type)
$("span:nth-of-type(2)")     → second span among spans
$("p:nth-of-type(even)")     → even paragraph positions

$("span:nth-child(2)")       → 2nd child among ALL tags
$("span:nth-last-of-type(2)") → 2nd span from the end

Use	Prefer
Nth of this tag from the start	`$("span:nth-of-type(2)")`
Nth child among all tags	`$("span:nth-child(2)")`
Nth of this tag from the end	`$("span:nth-last-of-type(2)")`

Approach

How to Use `:nth-of-type()`

Pick a tag, then pass an index, keyword, or equation counted among that tag only — from the start.

Choose the element type (span, p, li, and so on).
Pass a 1-based index among same-type siblings, or even/odd/An+B.
Ignore other tag names when counting — they do not shift of-type indexes.
Use :nth-child() if every sibling type should count.

Piece	Required?	Role
Base / type	Usually	Tag name that defines the of-type group
`:nth-of-type(…)`	Yes	Forward index within that type
Argument	Yes	Index, `even`/`odd`, or equation

Pseudocode

for each element E matching base:
    sameType = siblings of E.parent with tagName === E.tagName
    index = 1-based position of E in sameType (from start)
    if index matches (n | even | odd | An+B):
        keep E

return jQuery(kept)

Reference

Cheat Sheet

Keep these facts handy while counting same-type siblings from the start.

Topic	Detail
Syntax	`$(":nth-of-type(n \| even \| odd \| An+B)")`
Counting	1-based among same tag, from the start
`(1)`	Same as `:first-of-type`
vs `:nth-child()`	Same type only vs all children
vs `:nth-last-of-type()`	From start vs from end
Since	jQuery 1.9 (CSS)

Try it

Live Preview

Pick a pattern against the official-style span groups (and a mixed block).

Three span groups mirror the official demo names; mixed shows of-type vs child.

Result

$("span:nth-of-type(2)")
matched: 4
text: Kim, Ann, Richard, SecondSpan

/* same-tag siblings, counted from the start */

Code

jQuery Examples

Short, copy-ready snippets. Open a browser console with jQuery loaded, or use Try It Yourself for a live editor.

Example 1 — Official Demo: `span:nth-of-type(2)`

Find each span that is second among its sibling spans (jQuery API example).

jQuery

$("span:nth-of-type(2)").each(function () {
  this.textContent = this.textContent + " is 2nd sibling span";
});

console.log($("span:nth-of-type(2)").length);

Try It Yourself

How It Works

Group by parent. Each container numbers its own spans.
Count only spans. Other tags (if any) do not change span indexes.
Keep index 2. The second span in each group matches.
Annotate matches. Official demo appends is 2nd sibling span.

Example 2 — First of Type: `(1)` ≡ `:first-of-type`

Show that index 1 is the first element of that tag among siblings.

jQuery

var a = $("span:nth-of-type(1)").map(function () {
  return this.textContent.trim();
}).get().join(", ");

var b = $("span:first-of-type").map(function () {
  return this.textContent.trim();
}).get().join(", ");

console.log(a);
console.log(b);
console.log(a === b);

Try It Yourself

How It Works

Index 1 from the start. That is always the first span in the parent.
Compare with :first-of-type. Same nodes on the same markup.
Prefer the short form. Use :first-of-type when you only need the first of that tag.
Go further. Use (2), (3), … for later same-type siblings.

Example 3 — Of-Type vs `:nth-child()`

Mixed tags show why same-type counting matters.

jQuery

// Markup: <p>note</p> <span>A</span> <span>B</span>
console.log("of-type:", $("span:nth-of-type(1)").text());
console.log("nth-child:", $("span:nth-child(1)").length);

// of-type → "A" (first span)
// nth-child → 0 (first child is the p)

Try It Yourself

How It Works

Of-type group. Spans are numbered A=1, B=2 from the start.
First span wins. span:nth-of-type(1) selects A.
All-children check. The first child is p, so span:nth-child(1) fails.
When to choose. Mixed siblings → of-type; strict child slots → :nth-child().

Example 4 — Even Positions of Type

Stripe same-type siblings using even counted from the start.

jQuery

console.log("even:", $("span:nth-of-type(even)").length);
console.log("odd:", $("span:nth-of-type(odd)").length);

$("span:nth-of-type(even)").each(function () {
  this.textContent = "[E] " + this.textContent;
});

Try It Yourself

How It Works

Number only spans. Other tags (if any) are skipped in the count.
From the start. First span is odd (1); second is even (2).
Prefix even matches. Positions 2, 4, 6… among spans per parent.
Official patterns. Docs also support 3n and 3n+1 the same way.

Example 5 — `:nth-of-type()` vs `:nth-last-of-type()`

Same of-type counting, opposite directions.

jQuery

var fromStart = $("span:nth-of-type(2)").map(function () {
  return this.textContent.trim();
}).get().join(", ");

var fromEnd = $("span:nth-last-of-type(2)").map(function () {
  return this.textContent.trim();
}).get().join(", ");

console.log("from start:", fromStart);
console.log("from end:", fromEnd);

Try It Yourself

How It Works

Both count only spans. Other tags would not change either count.
Of-type direction. :nth-of-type(2) walks forward.
Last-of-type direction. :nth-last-of-type(2) walks backward.
Pick by intent. Near the start → of-type; near the end → :nth-last-of-type().

Edge Cases & Pitfalls

Check these before relying on :nth-of-type() in real projects.

type

Only the same tag counts

A leading p does not stop span:nth-of-type(1) from matching the first span. It does block span:nth-child(1).

index

1-based among same-type siblings

Official docs follow CSS: counting starts at 1. Do not mix with .eq(0) mental models without checking.

class

Classes do not create a new type

div.card:nth-of-type(1) still counts all div siblings by tag name, then checks the class.

direction

`(2)` ≠ second of type from the end

Use :nth-last-of-type(2) for the second same-tag sibling from the bottom.

Compatibility

Browser Support

:nth-of-type() is standard CSS and has worked in jQuery since 1.9. Modern browsers implement it in native querySelectorAll.

✓ CSS · jQuery 1.9+

jQuery :nth-of-type()

Supported in all modern browsers. Native: document.querySelectorAll("span:nth-of-type(2)"). Same-tag siblings, counted from the start.

100% Standard CSS selector

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

:nth-of-type() Universal

Bottom line: Safe everywhere modern jQuery runs. Prefer it over :nth-child() when other tags sit between same-type siblings.

Analysis

Performance Notes

Approach	Cost	Best for
`$("span:nth-of-type(n)")`	Native CSS when possible	Same-tag positions from the start
`$("span:first-of-type")`	Simpler selector	First of that tag only
`$("span:nth-child(n)")`	Native CSS when possible	Strict child slots among all tags

Prefer the selector that matches your tree model. Wrong of-type vs child choices cause silent misses more often than performance issues.

Remember

Key Takeaways

Role: nth same-tag sibling, counted from the start.
(1): same as :first-of-type.
Not nth-child: other tags do not shift of-type indexes.
From the end: use :nth-last-of-type().

One line: $("span:nth-of-type(n)") means “the nth span among span siblings.”

Frequently Asked Questions

What does :nth-of-type() do?

:nth-of-type(index) selects elements that are the nth sibling of their tag name under the same parent. $("span:nth-of-type(2)") matches the second span among span siblings — regardless of other tag types nearby.

How is it different from :nth-child()?

:nth-child() counts every sibling element. :nth-of-type() counts only siblings with the same tag. A leading p before spans means span:nth-child(1) fails, but span:nth-of-type(1) still matches the first span.

Is :first-of-type the same as :nth-of-type(1)?

Yes. Both select the first element of that tag name among siblings under the same parent.

Is counting 1-based?

Yes. Per CSS and jQuery docs, counting starts at 1. This differs from .eq(), which uses 0-based indexing on a flat collection.

What are even, odd, and An+B?

Official docs support :nth-of-type(even), odd, 3n, and 3n+1 — evaluated among same-type siblings only, so other tags between them do not shift indexes.

Which jQuery version added it?

jQuery 1.9. It follows the W3C CSS specification and works via querySelectorAll in modern browsers.

Next: :last-of-type

Select the last element of its type among siblings with :last-of-type.

:last-of-type tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

jQuery :first-of-type Selector jQuery :last-of-type Selector

jQuery :nth-of-type() Selector

What Is :nth-of-type()?

How to Use :nth-of-type()

Pseudocode

Cheat Sheet

Live Preview

jQuery Examples

Example 1 — Official Demo: span:nth-of-type(2)

How It Works

Example 2 — First of Type: (1) ≡ :first-of-type

How It Works

Example 3 — Of-Type vs :nth-child()

How It Works

Example 4 — Even Positions of Type

How It Works

Example 5 — :nth-of-type() vs :nth-last-of-type()

How It Works

Edge Cases & Pitfalls

Only the same tag counts

1-based among same-type siblings

Classes do not create a new type

(2) ≠ second of type from the end

Browser Support

jQuery :nth-of-type()

Performance Notes

Key Takeaways

Frequently Asked Questions

Related Topics

:first-of-type

:last-of-type

:nth-last-of-type()

:nth-child()

:eq() selector

Next: :last-of-type

About the author

What Is `:nth-of-type()`?

How to Use `:nth-of-type()`

Example 1 — Official Demo: `span:nth-of-type(2)`

Example 2 — First of Type: `(1)` ≡ `:first-of-type`

Example 3 — Of-Type vs `:nth-child()`

Example 5 — `:nth-of-type()` vs `:nth-last-of-type()`

`(2)` ≠ second of type from the end