jQuery :first-of-type Selector

What You’ll Learn

The :first-of-type selector matches every element that is the first of its tag name among siblings. It can return multiple nodes — one per parent. Standard CSS since jQuery 1.9; equivalent to :nth-of-type(1).

Introduction

Real markup mixes element types — a paragraph intro, then spans, then more paragraphs. You often need the first <p> or first <span> in each block, even when another tag is the overall first child. The CSS :first-of-type pseudo-class selects by element name among siblings, not absolute child position.

jQuery supports :first-of-type in selector strings since version 1.9. Official documentation states that it matches elements with no other element of the same name and parent coming before them in the document tree — so $("span:first-of-type") can match many spans, one per parent.

Understanding the :first-of-type Selector

Think of :first-of-type as “the first sibling of this tag name under each parent”:

• <div><span>A</span><span>B</span></div> → first span matches span:first-of-type.
• Second <div> with its own first span → also matches.
• <div><p>…</p><span>…</span></div> → span matches span:first-of-type but not span:first-child.
• Equivalent to :nth-of-type(1) in standard CSS.

📝 Syntax

Official jQuery API form (since 1.9):

jQuery( ":first-of-type" )

// typical usage — prefix with element:
$( "span:first-of-type" )
$( "article p:first-of-type" )
$( "tr td:first-of-type" )

// equivalent:
$( "h2:nth-of-type(1)" )

Parameters

• No arguments — matches elements that are the first of their element type among siblings.

Return value

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

Official jQuery API example

$( "span:first-of-type" ).addClass( "fot" );

Examples Gallery

Example 1 follows the official jQuery span:first-of-type demo. Examples 2–5 contrast with :first-child, style article lead paragraphs, verify :nth-of-type(1), and highlight table columns.

$( "span:first-of-type" ).addClass( "fot" );

Corey, and Nobody, → red italic (fot class)
Yehuda, Adam, Todd, Jörn, Scott, Timo → default styling

$( "span:first-of-type" ).addClass( "fot" );
$( "span:first-child" ).addClass( "fc" );

console.log( ":first-of-type →", $( "span:first-of-type" ).length );
console.log( ":first-child →", $( "span:first-child" ).length );

:first-of-type → 1 (Lead span highlighted)
:first-child → 0 (p is first child — no span match)

$( "article p:first-of-type" ).css({
  fontSize: "1.125rem",
  color: "#334155"
});

First p in each article → larger slate text
Second paragraphs → default styling

console.log( ":first-of-type →", $( "li:first-of-type" ).length );
console.log( ":nth-of-type(1) →", $( "li:nth-of-type(1)" ).length );

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

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

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

🚀 Common Use Cases

• Lead paragraphs — article p:first-of-type for intro text after headings.
• Inline name lists — official pattern with span:first-of-type.
• Section headings — section h2:first-of-type when markup mixes tags.
• Tables — highlight td:first-of-type label columns.
• Definition lists — style the first dt or dd in each group.
• CSS parity — same selector works in stylesheets and jQuery.

📝 Notes

• Available since jQuery 1.9 — standard CSS pseudo-class.
• Equivalent to :nth-of-type(1) — standard CSS specification.
• Can match multiple elements — one first-of-type per parent for the chosen tag.
• Differs from :first-child when siblings of other element types precede the target.
• Works in native querySelectorAll — no jQuery extension caveat.
• Always pair with an element type — p:first-of-type, not bare :first-of-type on large pages.

💡 Best Practices