jQuery :first-child Selector

What Is :first-child?

:first-child (since jQuery 1.1.4) selects every element that is the first child of its parent. Unlike .first(), which returns one element from a set, :first-child can match one per parent. It is equivalent to :nth-child(1).

// Official pattern — first span in each div
$("div span:first-child");

// First list item in each ul
$("ul li:first-child");

// Same as :nth-child(1)
$("p:nth-child(1)");

// Not the same as .first() (one element only)
$("li").first();

How to Use :first-child

Scope the selector, then style or read the matched first children.

1. Write a typed selector such as $("li:first-child") or $("div span:first-child").
2. Optionally scope with a parent: $("ul.nav li:first-child").
3. Chain methods — .text(), .addClass(), events.
4. Remember: the element must be the first element child of its parent.
5. Use .first() only when you want one match from the whole set.

Pseudocode

for each element matching the left side (e.g. span):
    look at its parent
    if this element is the first element child of that parent:
        include it in the result

result may contain many elements
    → one match is possible for each parent

.compare with .first():
    take the full matched set
    keep only the first item in that set
    → always 0 or 1 element

Cheat Sheet

Keep these facts handy while selecting first children.

Live Preview

Mark the first child in each group, compare with .first(), or count matches.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Prefer a typed selector over bare $(":first-child").

$("div span:first-child").each(function () {
  $(this).text($(this).text() + " [first]");
});

John, [first] Karl, Brandon
Glen, [first] Tane, Ralph

var perParent = $("ul li:first-child").length;
var oneOnly = $("ul li").first().length;

$("#out").text(
  ":first-child → " + perParent +
  ", .first() → " + oneOnly
);

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

$("ul li:first-child").prepend("* ");

* Ada
  Grace
  Alan
* Linus
  Ken
  Dennis

var a = $("ul li:first-child").map(function () {
  return $(this).text();
}).get().join(", ");

var b = $("ul li:nth-child(1)").map(function () {
  return $(this).text();
}).get().join(", ");

$("#out").text("first-child=[" + a + "] nth=[" + b + "]");

first-child=[Ada, Linus] nth=[Ada, Linus]

var child = $("div span:first-child").length;
var ofType = $("div span:first-of-type").length;

$("#out").text(
  "span:first-child → " + child +
  ", span:first-of-type → " + ofType
);

When div starts with <em> then <span>:
span:first-child → 0, span:first-of-type → 1

Performance Notes

Modern browsers implement :first-child in native CSS. Keep selectors scoped so jQuery does less work.

Key Takeaways