jQuery :even Selector

What You’ll Learn

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

Introduction

Zebra-striped tables, alternating list backgrounds, and grid layouts often need every other element from a group. jQuery’s :even pseudo-class filters the matched set to elements at even positions using zero-based indexing.

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

Understanding the :even Selector

Think of :even as keeping every other slot starting at index 0:

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

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":even" )



// typical usage — chain after a selector:

$( "tr:even" )

$( "li:even" )

$( "#salesTable tr:even" )



// modern replacement (jQuery 3.5+):

$( "tr" ).even()



// performance pattern:

$( "tr" ).filter( ":even" )

Parameters

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

Return value

• A jQuery object containing every even-indexed element (may be multiple).
• Empty collection when the matched set has no even indices (rare — index 0 always matches if set is non-empty).

Official jQuery API example

// Finds even table rows — index 0, 2, 4…

$( "tr:even" ).css( "background-color", "#bbf" );

Examples Gallery

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

$( "tr:even" ).css( "background-color", "#bbf" );



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

Rows at index 0 and 2 → #bbf background

Rows at index 1 and 3 → default (gray table bg)

$( "#list li:even" ).css( "backgroundColor", "#bbf" );

$( "#list li:odd" ).css( "color", "#dc2626" );



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

Items 0, 2, 4 → blue background

Items 1, 3 → red text

$( "#sales tr:even" ).css( "backgroundColor", "#dcfce7" );



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

#sales rows Jan and Mar (indices 0, 2) → green tint

#other table → no striping

$( ".row" ).even().css( "backgroundColor", "#bbf" );



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

Index 0 and Index 2 divs → #bbf background

.even() method — not deprecated

$( ".card" ).filter( ":even" ).css( "borderColor", "#2563eb" );



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

Card 0 and Card 2 → blue border

Separates native query from jQuery extension filter

🚀 Common Use Cases

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

📝 Notes

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

💡 Best Practices