jQuery :lt() Selector

What You’ll Learn

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

Introduction

Index filters let you target a subset of an already matched collection — style the first few table cells, highlight leading list items, or trim trailing rows from a batch operation. The jQuery :lt(index) pseudo-class selects elements before a given position in the matched set.

jQuery has supported :lt() 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 :lt() Selector

Think of :lt(n) as “everything before index n in this matched set”:

• $("td:lt(4)") → TD #0, #1, #2, #3 — indices 0 through 3 (official demo yellow cells).
• $("li:lt(2)") → the first two list items — indices 0 and 1.
• :lt(1) matches index 0 only — equivalent to :first and :eq(0).
• Negative :lt(-2) since 1.8 — official demo colors TD #0–#6 red text.

📝 Syntax

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

jQuery( ":lt(index)" )

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

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

// modern replacement (jQuery 3.4+ guidance):
$( "td" ).slice( 0, 4 )   // replaces td:lt(4)

Parameters

• index — zero-based cutoff; elements with index less 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 before the cutoff index.
• Empty collection when no elements fall below the index.

Official jQuery API example

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

Examples Gallery

Example 1 follows the official jQuery td:lt(4) and td:lt(-2) demo. Examples 2–5 cover :lt(1) as :first, .slice() migration, contrast with :gt(), and navigation list trimming.

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

TD #0–#3 → yellow background
TD #0–#6 → red text (before -2nd from end)
TD #7–#8 → default text color

console.log( ":lt(1) →", $( "td:lt(1)" ).length );   // 1
console.log( ":first →", $( "td:first" ).length );     // 1
console.log( ":eq(0) →", $( "td:eq(0)" ).length );     // 1

:lt(1) → 1 (index 0 only — TD #0)
:first → 1 (TD #0)
:eq(0) → 1 (TD #0)

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

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

Same visual result as td:lt(3)
TD #0, #1, #2 → yellow background
Uses pure CSS td selector, then .slice(0, 3) — not deprecated

console.log( ":lt(4) →", $( "td:lt(4)" ).length );  // TD #0–#3
console.log( ":gt(4) →", $( "td:gt(4)" ).length );  // TD #5–#8
// index 4 (TD #4) matches neither

:lt(4) → 4 (indices 0, 1, 2, 3)
:gt(4) → 4 (indices 5, 6, 7, 8)
TD #4 at index 4 → excluded by both

$( "ul.nav li:lt(2)" ).addClass( "nav-primary" );

First two li elements → class "nav-primary"
Remaining items → unchanged

🚀 Common Use Cases

• Table styling — highlight td:lt(4) leading columns per official demo.
• First N items — li:lt(3) for featured list entries.
• Navigation menus — ul.nav li:lt(2) for primary links.
• Legacy maintenance — read older code using index pseudo-classes.
• Migration — replace with .slice(0, index) in modern projects.
• Pair with :gt() — combine range filters for middle segments (legacy pattern).

📝 Notes

• Available since jQuery 1.0 — negative indices since 1.8 — deprecated in 3.4.
• Replace :lt(n) with .slice(0, n) — official migration guidance.
• Strictly less than — :lt(4) excludes index 4 itself.
• :lt(1) is equivalent to :first and :eq(0).
• 0-based indexing — unlike CSS :nth-child() (1-based).
• jQuery extension — not valid in native querySelectorAll.
• For performance, use a CSS selector first, then .slice(0, index).
• Prior to jQuery 1.8, a negative index was not accepted.

💡 Best Practices