jQuery :odd Selector

What You’ll Learn

The :odd selector matches elements at odd zero-based indices in the matched set — index 1, 3, 5, and so on. Available since jQuery 1.0; pair with :even; deprecated in jQuery 3.4 in favor of the .odd() method (3.5+).

Introduction

Alternating table rows, list highlights, and card grids often need every other element starting from the second item. jQuery’s :odd pseudo-class filters the matched set to elements at odd positions using zero-based indexing.

Official jQuery documentation notes a common surprise: because index 1 is odd, :odd selects the second element, fourth element, sixth element, and so on — not the first, third, fifth as everyday “odd row” numbering might suggest. Index selectors (:eq(), :lt(), :gt(), :even, :odd) always follow another selector that builds the matched set.

Understanding the :odd Selector

Think of :odd as keeping every other slot starting at index 1:

• tr:eq(1), tr:eq(3), tr:eq(5) → same indices as tr:odd.
• Four rows indexed 0–3 → :odd matches rows 1 and 3 (second and fourth).
• :even matches the complement — indices 0 and 2 (first and third).
• Selected elements stay in document order within the filtered set.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":odd" )

// typical usage — chain after a selector:
$( "tr:odd" )
$( "li:odd" )
$( "#salesTable tr:odd" )

// modern replacement (jQuery 3.5+):
$( "tr" ).odd()

// performance pattern:
$( "tr" ).filter( ":odd" )

Parameters

• No arguments — keeps elements at odd 0-based indices in the matched set.

Return value

• A jQuery object containing every odd-indexed element (may be multiple).
• Empty collection when the matched set has fewer than two elements (index 1 required).

Official jQuery API example

// Finds odd table rows — index 1, 3, 5…
$( "tr:odd" ).css( "background-color", "#bbbbff" );

Examples Gallery

Example 1 follows the official jQuery tr:odd demo. Examples 2–5 compare with :even, scope to one table, use the modern .odd() method, and apply the official .filter(":odd") performance pattern.

$( "tr:odd" ).css( "background-color", "#bbbbff" );

// Row #1 and #3 highlighted — Row #0 and #2 unchanged

Rows at index 1 and 3 → #bbbbff background
Rows at index 0 and 2 → default (gray table bg)

$( "#list li:odd" ).css( "backgroundColor", "#bbbbff" );
$( "#list li:even" ).css( "color", "#059669" );

// :odd → 2 items (1, 3) · :even → 3 items (0, 2, 4)

Items 1, 3 → blue background
Items 0, 2, 4 → green text

$( "#sales tr:odd" ).css( "backgroundColor", "#fef3c7" );

// #other table rows unchanged — indices restart per matched set

#sales rows Feb (index 1) → amber tint
#other table → no striping

$( ".row" ).odd().css( "backgroundColor", "#bbbbff" );

// Same result as $( ".row:odd" ) — preferred in new code

Index 1 and Index 3 divs → #bbbbff background
.odd() method — not deprecated

$( ".card" ).filter( ":odd" ).css( "borderColor", "#7c3aed" );

// Browser optimizes $(".card"); jQuery filters to odd indices

Card 1 and Card 3 → purple border
Separates native query from jQuery extension filter

🚀 Common Use Cases

• Table zebra striping — tr:odd on rows starting from the second (index 1).
• List styling — highlight every other li at odd indices.
• Grid layouts — style odd-indexed cards in a flat matched set.
• Complement with :even — two-tone UI from one list query.
• Legacy maintenance — read existing :odd in older jQuery code.
• Migration — replace with .odd() or .filter(":odd").

📝 Notes

• Available since jQuery 1.0 — 0-based odd indices (1, 3, 5…).
• Deprecated in jQuery 3.4 — prefer .odd() (3.5.0+) or .filter(":odd").
• Second element always matches when present — index 1 is odd (official docs emphasize this).
• Pair with :even for complementary sets — see also official :even selector.
• Not valid in native querySelectorAll — jQuery extension only.
• Selected elements appear in document order within the filtered result.

💡 Best Practices