jQuery :first Selector

What Is :first?

:first (since jQuery 1.0, deprecated 3.4) selects exactly one element — the first in the matched set, in document order. It equals :eq(0) / :lt(1). Prefer $("…").first() in new code.

// Legacy (still works; deprecated 3.4)
$("tr:first");

// Recommended
$("tr").first();

// Same idea
$("tr:eq(0)");
$("tr:lt(1)");

// Not the same as :first-child (can match many)
$("li:first-child");

How to Use :first / .first()

Build a set with a CSS selector, then keep only the first item.

1. Select candidates with a pure CSS selector: $("tr"), $("ul li").
2. Take the first: .first() (recommended) or legacy :first.
3. Chain actions — .text(), .addClass(), events.
4. Remember: one match only — not one per parent.
5. For per-parent firsts, use :first-child instead.

Pseudocode

set = all elements matching the left selector
      (in document order)

result = set[0] if set is not empty
          else empty

// .first() does the same after the set is built
// :first is a jQuery-only filter (not native CSS)

Cheat Sheet

Keep these facts handy when picking the first match.

Live Preview

Mark the first row, compare with .first() / :first-child, or count matches.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Prefer .first() for new code.

$("tr:first td").prepend("[first] ");

[first] Row 1
Row 2
Row 3

$("tr").first().find("td").prepend("[first] ");

[first] Row 1
(same result as :first, modern style)

var a = $("tr:first").text();
var b = $("tr:eq(0)").text();
$("#out").text("first=[" + a + "] eq=[" + b + "]");

first=[Row 1] eq=[Row 1]

var one = $("ul li:first").length;
var many = $("ul li:first-child").length;
$("#out").text(":first → " + one + ", :first-child → " + many);

:first → 1, :first-child → 2
(with two ul lists)

$("#menu li").first().prepend("* ");

* Home
About
Contact

Performance Notes

Because :first is not CSS, jQuery cannot hand the whole query to the browser. Select first, then narrow with .first().

Key Takeaways