jQuery :first-child Selector

What You’ll Learn

The :first-child selector matches every element that is the first child of its parent. Unlike .first(), it can return multiple nodes — one per parent. Standard CSS since jQuery 1.1.4; equivalent to :nth-child(1).

Introduction

Layout patterns often treat the first item in a group differently — bold the lead nav link, underline the opening name in a list, or highlight the first column in a table. The CSS :first-child pseudo-class selects those elements based on sibling position within each parent.

jQuery supports :first-child in selector strings since version 1.1.4. Official documentation emphasizes that while .first() matches only a single element, :first-child can match more than one — one for each parent in the document.

Understanding the :first-child Selector

Think of :first-child as “the first sibling under each parent”:

• <div><span>A</span><span>B</span></div> → first span matches span:first-child.
• Second <div> with its own first span → also matches.
• <div><p>…</p><span>…</span></div> → span is not first child — no match for span:first-child.
• Equivalent to :nth-child(1) per official jQuery docs.

📝 Syntax

Official jQuery API form (since 1.1.4):

jQuery( ":first-child" )

// typical usage — prefix with element:
$( "div span:first-child" )
$( "ul.nav li:first-child" )
$( "tr td:first-child" )

// equivalent:
$( "p:nth-child(1)" )

Parameters

• No arguments — matches elements that are the first child of their parent.

Return value

• A jQuery object containing every matching first-child element (often multiple).
• Empty collection when no element is a first child in scope.

Official jQuery API example

$( "div span:first-child" )
  .css( "text-decoration", "underline" )
  .hover( function() {
    $( this ).addClass( "sogreen" );
  }, function() {
    $( this ).removeClass( "sogreen" );
  });

Examples Gallery

Example 1 follows the official jQuery div span:first-child demo. Examples 2–5 contrast with .first(), style navigation lists, verify :nth-child(1), and highlight table columns.

$( "div span:first-child" )
  .css( "text-decoration", "underline" )
  .hover( function() {
    $( this ).addClass( "sogreen" );
  }, function() {
    $( this ).removeClass( "sogreen" );
  });

John, and Glen, → underlined
Hover → sogreen class (green, bold)
Karl, Brandon, Tane, Ralph → unchanged

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

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

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

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

Home and Dashboard → bold blue
Other items → default styling

console.log( ":first-child →", $( "p:first-child" ).length );
console.log( ":nth-child(1) →", $( "p:nth-child(1)" ).length );

:first-child → 2
:nth-child(1) → 2 (identical matched set)

$( "tr td:first-child" ).css({
  backgroundColor: "#f1f5f9",
  fontWeight: "bold"
});

Name, Ada, Ben columns (first td per row) → gray + bold
Age and City columns → unchanged

🚀 Common Use Cases

• Navigation — style li:first-child as the home or primary link.
• Inline name lists — official demo pattern with span:first-child.
• Tables — highlight td:first-child label columns.
• Card grids — remove left margin on .card:first-child per row wrapper.
• Form rows — bold labels that are the first child in a field group.
• CSS parity — same selector works in stylesheets and jQuery.

📝 Notes

• Available since jQuery 1.1.4 — standard CSS pseudo-class.
• Equivalent to :nth-child(1) — official jQuery documentation.
• Can match multiple elements — unlike .first() which returns one.
• Element must be the first child of its parent — preceding siblings block a match.
• Works in native querySelectorAll — no jQuery extension caveat.
• Not the same as :first-of-type — that ignores siblings of other tag names.

💡 Best Practices