jQuery :nth-child() Selector

Beginner
7 min read
Updated: Oct 2026
5 examples
Live preview
Definition

What Is :nth-child()?

:nth-child(index) selects elements that are the nth child of their parent. Counting is 1-based (CSS) and includes every sibling element. Available since jQuery 1.1.4.

Remember
$(":nth-child(index | even | odd | equation)")

$("li:nth-child(2)")      → 2nd child if it is an li
$("li:nth-child(even)")   → even child positions
$("li:nth-child(3n)")     → 3, 6, 9…
$("li:nth-child(3n+1)")   → 1, 4, 7…

$("li").eq(1)             → 2nd in the jQuery set (0-based)
$("li:even")              → every other match (ignores parent)
UsePrefer
Nth child per parent$("li:nth-child(2)")
Nth item in a flat set$("li").eq(1)
Count from the end$("li:nth-last-child(2)")
Approach

How to Use :nth-child()

Attach the pseudo-class to a tag or class, then pass an index, keyword, or equation.

  1. Choose the element type you care about (li, tr, and so on).
  2. Pass a 1-based index, even/odd, or an An+B equation.
  3. Remember: all siblings count — not only matching tags.
  4. Do not confuse with .eq() (0-based, flat collection).
PieceRequired?Role
Base selectorUsuallyElement that must match at that child slot
:nth-child(…)YesChild-position filter
ArgumentYesIndex, even/odd, or equation

Pseudocode

Pseudocode
for each element E matching base:
    parent = E.parent
    index = 1-based position of E among parent's children
    if index matches (n | even | odd | An+B):
        keep E

return jQuery(kept)
Reference

Cheat Sheet

Keep these facts handy while writing child-index selectors.

TopicDetail
Syntax$(":nth-child(n | even | odd | An+B)")
Counting1-based (CSS); all siblings count
even / oddBy child position inside each parent
3n / 3n+1Every 3rd; every 3rd starting at 1
vs .eq()Parent child slot vs flat 0-based pick
vs :evenParent-aware vs set-aware
SincejQuery 1.1.4 (CSS)
Try it

Live Preview

Pick an :nth-child() pattern against two short lists and see which items match.

Two lists — matches can appear once per parent, like the official demo.

Result
$("ul li:nth-child(2)")
matched: 2
text: Karl, Tane

/* 1-based child position per parent */
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: ul li:nth-child(2)

Mark the second list item in every ul (jQuery API example).

jQuery
$("ul li:nth-child(2)").each(function () {
  this.textContent = this.textContent + " - 2nd!";
});

console.log($("ul li:nth-child(2)").length);
Try It Yourself

How It Works

  1. Scan each list. Every ul has its own child positions.
  2. Require index 2. Only the second child is a candidate.
  3. Require an li. The second child must also be a list item.
  4. Append a note. Official demo style: add - 2nd! to each match.

Example 2 — Zebra Rows: even / odd

Stripe items by child position inside each parent.

jQuery
console.log("even:", $("ul li:nth-child(even)").length);
console.log("odd:", $("ul li:nth-child(odd)").length);

$("ul li:nth-child(even)").each(function () {
  this.textContent = "[E] " + this.textContent;
});
Try It Yourself

How It Works

  1. Even slots. Positions 2, 4, 6… inside each parent match even.
  2. Odd slots. Positions 1, 3, 5… match odd.
  3. Per parent. Striping restarts in every list or table body.
  4. Classic use. Zebra tables and alternating list styles.

Example 3 — Equations: 3n and 3n+1

Use An+B patterns from the official playground demo.

jQuery
console.log("3n:", $("ul li:nth-child(3n)").map(function () {
  return this.textContent.trim();
}).get().join(", "));

console.log("3n+1:", $("ul li:nth-child(3n+1)").map(function () {
  return this.textContent.trim();
}).get().join(", "));
Try It Yourself

How It Works

  1. Read An+B. For integer n ≥ 0, compute positions that match.
  2. 3n. Positions 3, 6, 9… (every third child).
  3. 3n+1. Positions 1, 4, 7… (every third, starting at first).
  4. Same idea as CSS. jQuery follows the CSS nth formula.

Example 4 — :nth-child() vs .eq()

Same number, different meaning — parent slot vs flat collection index.

jQuery
var nth = $("ul li:nth-child(2)").map(function () {
  return this.textContent.trim();
}).get().join(", ");

var eq = $("ul li").eq(1).text().trim();

console.log("nth-child(2):", nth);  // one per list
console.log(".eq(1):", eq);         // one item, 0-based
Try It Yourself

How It Works

  1. Child position. :nth-child(2) is 1-based and parent-aware.
  2. Set position. .eq(1) is 0-based inside the matched set.
  3. Multiple parents. nth can return several; eq returns one.
  4. Rule of thumb. Tree position → nth. Flat pick → .eq() / :eq().

Example 5 — :nth-child(even) vs :even

Parent-aware striping is not the same as filtering the flat match list.

jQuery
console.log("nth even:", $("ul li:nth-child(even)").length);
console.log(":even:", $("ul li:even").length);

// Official note: :even ignores parent and filters the list;
// :nth-child(even) counts child index per parent.
Try It Yourself

How It Works

  1. nth even. Keeps children at even sibling indexes in each parent.
  2. :even. Keeps every other element in the flat jQuery set (0-based).
  3. Different models. Same length does not mean the same nodes when lists vary.
  4. Prefer nth for trees. Prefer :even only when you mean “every other match.”

Edge Cases & Pitfalls

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

count

All siblings count, not only matching tags

If a ul has a non-li first child, li:nth-child(1) matches nothing — the first child is not an li.

index

1-based vs 0-based

Official docs: :nth-child(1) is first; .eq(1) is second. Mixing these is the most common bug.

even

:nth-child(even) ≠ :even

One is parent-aware CSS. The other filters the matched set. Official playground demo highlights this difference.

type

Need “nth of this type”?

When other tags sit between items, consider :nth-of-type() instead of :nth-child().

Compatibility

Browser Support

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

✓ CSS · jQuery 1.1.4+

jQuery :nth-child()

Supported in all modern browsers. Native: document.querySelectorAll("li:nth-child(2)"). 1-based CSS counting.

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-child() Universal

Bottom line: Safe everywhere jQuery runs. Remember 1-based child indexes — and that all siblings count.

Analysis

Performance Notes

ApproachCostBest for
$("li:nth-child(n)")Native CSS when possibleParent-aware positions
$("li").eq(n)O(1) pick from a setSingle flat index
$("li:even")Filter matched setEvery other match (not per parent)

Prefer the selector that matches your mental model. Wrong combinators force extra filtering later and confuse readers more than they hurt raw speed.

Remember

Key Takeaways

  • Role: match by 1-based child position inside each parent.
  • Args: index, even/odd, or An+B equations.
  • Not .eq(): different counting and different scope.
  • From the end: use :nth-last-child().

One line: $("li:nth-child(n)") means “the nth child of its parent — if that child is an li.”

Frequently Asked Questions

:nth-child(index) selects elements that are the nth child of their parent. Counting starts at 1 and includes every sibling element. $("li:nth-child(2)") matches an li only when it is the second child overall.
1-based, per the CSS specification. The first child is :nth-child(1). jQuery methods like .eq() and .first() use 0-based indexing instead.
:nth-child(n) checks child position within each parent and can match one element per parent. .eq(n) picks a single item from the current jQuery collection using a 0-based index, ignoring parent relationships.
:nth-child(even) / :nth-child(odd) stripe by child position inside each parent. Equations like :nth-child(3n) match every 3rd child (3, 6, 9…); :nth-child(3n+1) matches 1, 4, 7…
Yes. Both match elements that are the first child of their parent. Use :nth-child() when you need other positions or equations.
:nth-child(even) counts sibling position within each parent. jQuery's :even filters the flat matched set every other item, with no regard for parent. They can select different nodes.

Next: :nth-last-child()

Count from the end of each parent with the :nth-last-child() selector.

:nth-last-child() tutorial →

About the author

Mari Selvan M P
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)

10 people found this page helpful

jQuery :only-child Selector jQuery :nth-last-child() Selector