jQuery :nth-child() Selector

What You’ll Learn

The :nth-child() selector picks elements by their position among siblings inside a parent — first, second, every even row, or every third item. Available since jQuery 1.1.4; counting is 1-based (unlike .eq()). Master fixed indexes, even/odd, and An+B equations.

Introduction

Lists, tables, and grids often need pattern styling — highlight the second menu item, stripe table rows, or mark every third card. CSS solved this with :nth-child(), and jQuery exposes the same selector since version 1.1.4.

The key idea: jQuery checks each element’s child index within its parent, counting all sibling elements (not just matching tags) starting at 1. That is different from jQuery’s .eq(), which uses 0-based indexing on whatever collection you already selected. Official docs stress this distinction — confusing the two is a common beginner mistake.

Understanding the :nth-child() Selector

Read li:nth-child(2) as: “Select every li that is also the second child of its parent.” If a div sits before the second li, that list item will not match — because it is the third child overall.

• li:nth-child(1) → same as :first-child.
• tr:nth-child(even) → even-position rows inside each tbody.
• li:nth-child(3n) → every 3rd item: 3, 6, 9…
• li:nth-child(3n+1) → 1, 4, 7, 10…

📝 Syntax

Official jQuery API form (since 1.1.4):

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

// fixed index (1-based):
$( "ul li:nth-child(2)" )

// keywords:
$( "tr:nth-child(even)" )
$( "tr:nth-child(odd)" )

// An+B equations:
$( "li:nth-child(3n)" )      // 3, 6, 9 …
$( "li:nth-child(3n+1)" )    // 1, 4, 7 …
$( "li:nth-child(3n+2)" )    // 2, 5, 8 …

Parameters

• index — a positive integer (1, 2, 3…), the keyword even or odd, or an An+B equation accepted by CSS.

Return value

• A jQuery object containing every element that matches both the base selector and the nth-child rule within its parent.
• Can match multiple elements — one per parent when lists repeat.

Official jQuery API example

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

Examples Gallery

Example 1 follows the official jQuery demo. Examples 2–5 cover even/odd stripes, 3n patterns, offset equations, and the critical :nth-child() vs .eq() difference. Use Try-it links to experiment live.

$( "ul li:nth-child(2)" ).append( " - 2nd! " );

// Matches second li in each ul — Brandon and Ralph in the official demo

First ul: "Brandon - 2nd!"
Second ul (only one li): no match
Third ul: "Ralph - 2nd!"

$( "tr:nth-child(even)" ).css( "background", "#dbeafe" );

// Official demo also compares :nth-child(odd) with .odd() — different models

Rows 2 and 4 — blue background
Rows 1, 3, 5 — default background

$( "li:nth-child(3n)" ).addClass( "highlight" );

// 3n means positions where index is divisible by 3

Items 3, 6, 9 highlighted
Items 1, 2, 4, 5, 7, 8 unchanged

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

// Also try :nth-child(3n+2) for middle items in each group of three

Items 1, 4, 7 — green "lead" styling
Group starts visually marked in a 3-item cycle

// 1-based child position among ALL siblings:
$( "#list li:nth-child(1)" ).addClass( "nth" );   // Alpha

// 0-based index in the matched jQuery set:
$( "#list li" ).eq( 1 ).addClass( "eq" );           // Beta (second li)

nth-child(1) → Alpha (blue outline)
.eq(1) → Beta (orange outline)
Same number, different elements!

🚀 Common Use Cases

• Table stripes — tr:nth-child(even) for alternating row colors.
• Navigation — style the second menu item with li:nth-child(2).
• Grid layouts — clear every third card using div:nth-child(3n).
• Grouped lists — mark group starts with li:nth-child(3n+1).
• Repeating forms — highlight every other field row for readability.
• Data tables — official playground pattern with clickable :nth-child buttons.

📝 Notes

• Available since jQuery 1.1.4 — implementation follows the CSS specification strictly.
• Counting is 1-indexed; :nth-child(1) equals :first-child.
• All sibling elements count toward the index — not only elements matching the base selector.
• :nth-child(even) differs from jQuery’s :even — parent context vs flat filtering.
• Official docs recommend understanding the .eq() distinction before using both in one script.
• Native querySelectorAll("li:nth-child(2)") uses identical syntax in modern browsers.

💡 Best Practices