jQuery :gt() Selector

What You’ll Learn

The :gt(index) selector matches every element whose zero-based index in the matched set is greater than index. Negative indices since 1.8. jQuery extension since 1.0; deprecated in 3.4 — prefer .slice().

Introduction

Index filters let you target a subset of an already matched collection — skip the first few table cells, hide trailing list items, or style everything after a cutoff. The jQuery :gt(index) pseudo-class selects elements after a given position in the matched set.

jQuery has supported :gt() since version 1.0; negative indices since 1.8. Official documentation states that index-related selectors filter the set matched by what precedes them and use 0-based indexing like JavaScript arrays — unlike CSS :nth-child(n), which is 1-based.

Understanding the :gt() Selector

Think of :gt(n) as “everything after index n in this matched set”:

• $("td:gt(4)") → TD #5, #6, #7, #8 — indices 5 through 8 (official demo yellow cells).
• $("li:gt(0)") → all list items except the first (index 0).
• :gt(1) starts at index 2 — after the second element, not including it.
• Negative :gt(-2) since 1.8 — official demo colors TD #8 red.

📝 Syntax

Official jQuery API form (since 1.0; negative since 1.8; deprecated 3.4):

jQuery( ":gt(index)" )

// typical usage — prefix with element:
$( "td:gt(4)" )
$( "ul.nav li:gt(0)" )
$( "tr:gt(2)" )

// negative index (since 1.8):
$( "td:gt(-2)" )

// modern replacement (jQuery 3.4+ guidance):
$( "td" ).slice( 5 )   // replaces td:gt(4)

Parameters

• index — zero-based cutoff; elements with index greater than this value match.
• Negative index (since 1.8) — counts backwards from the last element in the matched set.

Return value

• A jQuery object containing every matching element after the cutoff index.
• Empty collection when no elements exceed the index.

Official jQuery API example

$( "td:gt(4)" ).css( "backgroundColor", "yellow" );
$( "td:gt(-2)" ).css( "color", "red" );

Examples Gallery

Example 1 follows the official jQuery td:gt(4) and td:gt(-2) demo. Examples 2–5 cover .slice() migration, skipping the first item, contrast with :eq(), and negative indices.

$( "td:gt(4)" ).css( "backgroundColor", "yellow" );
$( "td:gt(-2)" ).css( "color", "red" );

TD #0–#4 → default styling
TD #5–#7 → yellow background
TD #8 → yellow background + red text

// legacy (deprecated selector):
// $( "td:gt(4)" ).css( "backgroundColor", "yellow" );

// recommended:
$( "td" ).slice( 5 ).css( "backgroundColor", "yellow" );

Same visual result as td:gt(4)
Uses pure CSS td selector, then .slice(5) — not deprecated

$( "ul.features li:gt(0)" ).css( "opacity", "0.6" );

First li → full opacity
Items 2–4 → faded (opacity 0.6)

console.log( ":gt(2) →", $( "td:gt(2)" ).length );  // TD #3–#8
console.log( ":eq(2) →", $( "td:eq(2)" ).length );  // TD #2 only

:gt(2) → 6 (indices 3, 4, 5, 6, 7, 8)
:eq(2) → 1 (index 2 only — TD #2)

$( "td:gt(-2)" ).css( "fontWeight", "bold" );
console.log( "Matched:", $( "td:gt(-2)" ).map(function() {
  return $( this ).text();
}).get().join( ", " ) );

TD #8 → bold (official demo also sets red color)
Console: Matched: TD #8

🚀 Common Use Cases

• Table styling — highlight td:gt(4) trailing columns per official demo.
• Skip first item — li:gt(0) for secondary list styling.
• Pagination UI — hide rows with tr:gt(9) before “show more” expands.
• Legacy maintenance — read older code using index pseudo-classes.
• Migration — replace with .slice(index + 1) in modern projects.
• Pair with :lt() — combine range filters for middle segments (legacy pattern).

📝 Notes

• Available since jQuery 1.0 — negative indices since 1.8 — deprecated in 3.4.
• Replace :gt(n) with .slice(n + 1) — official migration guidance.
• Strictly greater than — :gt(4) excludes index 4 itself.
• 0-based indexing — unlike CSS :nth-child() (1-based).
• jQuery extension — not valid in native querySelectorAll.
• Index applies to the matched set from the preceding selector, not the whole document.

💡 Best Practices