Home jQuery Selectors :odd jQuery :odd Selector Definition
What Is :odd? :odd selects elements at odd zero-based indexes in the matched set — positions 1, 3, 5… (the 2nd, 4th, 6th elements). Available since jQuery 1.0. See also :even
!
Deprecated (jQuery 3.4) Remove :odd from selectors. Prefer .odd().filter(":odd") after a CSS query.
$(":odd")
$("tr:odd") → indexes 1, 3, 5… in the tr set
$("tr").odd() → same idea (jQuery 3.5+)
indexes: 0 1 2 3
even odd even odd
:odd → 2nd, 4th, 6th… elements (counter-intuitive!)
:even → 1st, 3rd, 5th… elements Approach
How to Use :odd Match a set first, then keep only odd indexes in that flat list.
Select the elements you care about (tr, li, and so on). Filter with :odd, .filter(":odd"), or .odd(). Remember: index 1 is the second element. For new code on jQuery 3.5+, use .odd() instead of :odd. Piece Required? Role Base selector Usually Builds the matched set to filter :odd / .odd()Yes Keeps odd 0-based indexes Document order — Results follow appearance in the DOM
Pseudocode set = find(baseSelector) // document order
result = empty
for i from 0 to set.length - 1:
if i is odd: // 1, 3, 5…
keep set[i]
return jQuery(result) Reference
Cheat Sheet Keep these facts handy while filtering odd positions.
Topic Detail Syntax $(":odd") / $("sel").odd()Indexes 0-based: keeps 1, 3, 5… First match 2nd element in the set (index 1) vs :even Odd vs even indexes; no overlap vs :nth-child(odd) Flat set vs parent child slots Status Deprecated in 3.4; use .odd() (3.5+) Since jQuery 1.0 (extension, not CSS)
Try it
Live Preview Compare :odd, :even, and parent-aware :nth-child(odd) on a small table.
Code
jQuery Examples Short, copy-ready snippets. Open a browser console with jQuery loaded, or use Try It Yourself for a live editor.
1. Official zebra 2. Why 2nd row 3. :odd vs :even 4. vs :nth-child(odd) 5. Prefer .odd() Example 1 — Official Demo: tr:odd Find odd table rows — second, fourth, and so on (jQuery API example).
var names = $("tr:odd").map(function () {
return this.textContent.trim();
}).get().join(", ");
console.log($("tr:odd").length);
console.log(names); 2
Row with Index #1, Row with Index #3 How It Works Match all rows. $("tr") builds a flat set in document order.Keep odd indexes. Positions 1 and 3 remain.Skip even indexes. Rows #0 and #2 are excluded.Classic zebra use. Official demo styles those rows with a background color.Example 2 — Why the Second Element Matches Print each index so the 0-based rule is obvious.
$("li").each(function (i) {
console.log(i, this.textContent.trim(), i % 2 === 1 ? "ODD" : "even");
});
console.log("odd texts:", $("li:odd").map(function () {
return this.textContent.trim();
}).get().join(", ")); 0 A0 even
1 A1 ODD
2 A2 even
3 A3 ODD
odd texts: A1, A3 How It Works List indexes. jQuery’s .each() callback receives the 0-based index.Test oddness. i % 2 === 1 marks what :odd keeps.Second item first. Index 1 is the first odd slot.Mental model. Think “every other item starting at the second.”Example 3 — :odd vs :even The two selectors split a set cleanly with no overlap.
console.log("odd:", $("tr:odd").map(function () {
return this.textContent.trim();
}).get().join(", "));
console.log("even:", $("tr:even").map(function () {
return this.textContent.trim();
}).get().join(", "));
console.log("total:", $("tr").length); odd: Row with Index #1, Row with Index #3
even: Row with Index #0, Row with Index #2
total: 4 How It Works Odd half. Indexes 1 and 3.Even half. Indexes 0 and 2.No overlap. Every matched element lands in exactly one group.Pair them. Zebra UIs often style both halves differently.Example 4 — :odd vs :nth-child(odd) Flat set filtering is not the same as parent-aware CSS odd children.
console.log(":odd →", $("tr:odd").map(function () {
return this.textContent.trim();
}).get().join(", "));
console.log("nth-child(odd) →", $("tr:nth-child(odd)").map(function () {
return this.textContent.trim();
}).get().join(", ")); :odd → Row with Index #1, Row with Index #3
nth-child(odd) → Row with Index #0, Row with Index #2
Opposite rows on a simple 4-row table How It Works jQuery :odd. Uses 0-based set indexes → 2nd and 4th rows.CSS :nth-child(odd). Uses 1-based child positions → 1st and 3rd rows.Same word, different math. “Odd” alone is ambiguous — know which system you mean.Parent-aware striping. Prefer :nth-child(odd)Example 5 — Prefer .odd() (jQuery 3.5+) Same filter as :odd, without the deprecated pseudo-class in the selector string.
var $byPseudo = $("tr:odd");
var $byMethod = $("tr").odd(); // jQuery 3.5+
console.log($byPseudo.length === $byMethod.length);
console.log($byMethod.map(function () {
return this.textContent.trim();
}).get().join(", ")); true
Row with Index #1, Row with Index #3
Same set via :odd and .odd() How It Works Select first. $("tr") uses a fast CSS query.Filter with .odd(). Keeps odd indexes on that collection.Same result. Length and nodes match $("tr:odd").Future-proof. Official migration path after the 3.4 deprecation — see .odd()Edge Cases & Pitfalls Check these before relying on :odd in real projects.
deprecated Deprecated since jQuery 3.4 Official docs: remove :odd from selectors; use .odd() (3.5+) or .filter(":odd").
index Counter-intuitive first match :odd starts at the second element (index 1). Want the first row? That is :even.
scope Flat set, not per parent $("tr:odd") numbers every matched row in the document. Multiple tables share one index sequence unless you scope first.
perf Not a CSS selector Cannot use querySelectorAll alone. Select with CSS, then filter — official performance note.
Compatibility
Browser Support :odd is a jQuery extension (not CSS), available since 1.0 . It works wherever jQuery runs, but is deprecated in 3.4 . Prefer .odd() from jQuery 3.5+ .
✓ jQuery 1.0+ · Deprecated 3.4
jQuery :odd Works in all browsers with jQuery. Not available in native querySelectorAll. Migrate to .odd() for modern code.
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 :odd jQuery only
Bottom line: Supported for compatibility, but plan to replace :odd with .odd() or .filter(":odd") in new work.
Analysis
Performance Notes Approach Cost Best for $("tr").odd()CSS query + filter Modern jQuery (recommended) $("tr").filter(":odd")CSS query + filter Official perf pattern $("tr:odd")Sizzle path (no QSA) Legacy only
Official docs: because :odd is not CSS, select with a pure CSS selector first, then filter. That lets the browser optimize the initial query.
Remember
Key Takeaways One line: :odd means “every other match starting at the second” — and modern code should use .odd().
Frequently Asked Questions What does the :odd selector do? :odd selects elements at odd zero-based indexes in the matched set — 1, 3, 5, and so on. $("tr:odd") matches the second, fourth, and sixth rows among matched tr elements. Available since jQuery 1.0.
Why does :odd select the second row? Indexing is 0-based. Index 1 is odd, so the second element matches. Official docs call this counter-intuitive if you expect the first row — use :even for indexes 0, 2, 4…
What is the difference between :odd and :even? :odd matches 1, 3, 5… :even matches 0, 2, 4… Together they partition the matched set with no overlap.
Is :odd deprecated? Yes — deprecated in jQuery 3.4. Prefer $("tr").odd() (jQuery 3.5+) or $("tr").filter(":odd") instead of $("tr:odd").
How is :odd different from :nth-child(odd)? :odd filters the flat jQuery matched set (0-based). CSS :nth-child(odd) counts children within each parent (1-based). They can select different nodes.
What is the best performance pattern? Official docs: :odd is a jQuery extension, so it cannot use querySelectorAll alone. Select with a CSS selector first, then .filter(":odd") or .odd().
Next: :first Selector Select the first element in a matched set with the :first selector.
:first tutorial → About the author Developer, cloud engineer, and technical writer
I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.
11 people found this page helpful
