jQuery :first Selector

What You’ll Learn

The :first selector matches exactly one element — the first in the matched set, in document order. Equivalent to :eq(0). jQuery extension since 1.0; deprecated in 3.4 — prefer the .first() method.

Introduction

When you have many matching elements — table rows, list items, or cards — you often need only the first one in document order. The jQuery :first pseudo-class narrows a matched set to that single leading element.

jQuery has supported :first since version 1.0. Official documentation states it selects the first matched DOM element and is equivalent to :eq(0). As of jQuery 3.4, the selector is deprecated — use .first() on a CSS-selected collection instead.

Understanding the :first Selector

Think of :first as “keep only index 0 from this matched set”:

• $("tr:first") → one row — the first tr in document order.
• $("li:first") → one list item — the very first li on the page (in scope).
• Equivalent to :eq(0) and :lt(1) per official jQuery docs.
• Not the same as :first-child — that can match one element per parent.

📝 Syntax

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

jQuery( ":first" )

// typical usage — prefix with element:
$( "tr:first" )
$( "ul.nav li:first" )
$( "div.card:first" )

// equivalents:
$( "tr:eq(0)" )
$( "tr:lt(1)" )

// modern replacement (jQuery 3.4+ guidance):
$( "tr" ).first()

Parameters

• No arguments — keeps the first element from the matched set that precedes :first.

Return value

• A jQuery object containing zero or one element.
• Empty collection when the preceding selector matched nothing.

Official jQuery API example

$( "tr:first" ).css( "font-style", "italic" );

Examples Gallery

Example 1 follows the official jQuery tr:first demo. Examples 2–5 cover equivalence with :eq(0), migration to .first(), contrast with :first-child, and scoped list selection.

$( "tr:first" ).css( "font-style", "italic" );

Row 1 → italic
Row 2, Row 3 → normal font style

console.log( ":first →", $( "li:first" ).text() );
console.log( ":eq(0) →", $( "li:eq(0)" ).text() );
console.log( "Same element?", $( "li:first" ).is( $( "li:eq(0)" )[0] ) );

:first → Alpha
:eq(0) → Alpha
Same element? true

// legacy (deprecated selector):
// $( "tr:first" ).css( "font-style", "italic" );

// recommended:
$( "tr" ).first().css( "font-style", "italic" );

First row → italic (same visual result as tr:first)
Uses pure CSS tr selector, then .first() — not deprecated

$( "li:first" ).addClass( "one" );
$( "li:first-child" ).addClass( "fc" );

console.log( ":first →", $( "li:first" ).length );
console.log( ":first-child →", $( "li:first-child" ).length );

:first → 1 (only A1 outlined)
:first-child → 2 (A1 and B1 highlighted)

$( "ul.nav li:first" ).css({
  fontWeight: "bold",
  color: "#2563eb"
});

Home → bold blue (first li in ul.nav)
Dashboard in second nav list → unchanged
Other items → default styling

🚀 Common Use Cases

• Table headers — style tr:first or thead tr:first for emphasis.
• Lead list item — highlight the first entry in a flat collection with li:first.
• First card in a grid — .card:first for featured layout (legacy code).
• Legacy maintenance — understand :first when reading older jQuery projects.
• Migration — replace with $("selector").first() in modern codebases.
• Performance — select with CSS first, then .filter(":first") or .first().

📝 Notes

• Available since jQuery 1.0 — deprecated in 3.4; prefer .first().
• Equivalent to :eq(0) and :lt(1) — official jQuery documentation.
• Matches only one element — unlike :first-child which can match many.
• jQuery extension — not valid in native querySelectorAll.
• For performance, use a pure CSS selector first, then .filter(":first") or .first().
• Do not confuse with CSS :first-child or :first-of-type — different rules entirely.

💡 Best Practices