jQuery :first-of-type Selector

What Is :first-of-type?

:first-of-type (since jQuery 1.9) selects every element that is the first among siblings of the same tag name. Unlike :first-child, an earlier sibling of a different tag does not block the match. It is equivalent to :nth-of-type(1).

// Official pattern — first span under each parent
$("span:first-of-type");

// First paragraph in each article
$("article p:first-of-type");

// Same as :nth-of-type(1)
$("span:nth-of-type(1)");

// Different from :first-child (any tag must be #1)
$("span:first-child");

How to Use :first-of-type

Pick a tag, optionally scope a parent, then style or read the first matching sibling of that type.

1. Write a typed selector such as $("span:first-of-type").
2. Optionally scope: $("div.group span:first-of-type").
3. Chain methods — .text(), .addClass(), events.
4. Remember: only same-tag siblings matter for this filter.
5. Use :first-child when the element must be child #1 of any type.

Pseudocode

for each element matching the left side (e.g. span):
    look at its parent and same-tag siblings
    if no earlier sibling has the same tag name:
        include it in the result

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

.compare with :first-child:
    first-child → must be the first element child (any tag)
    first-of-type → must be the first of this tag only

Cheat Sheet

Keep these facts handy while selecting first-of-type elements.

Live Preview

Mark first-of-type spans, compare with :first-child, or count matches.

Ready — pick an action and click Run.

jQuery Examples

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

$("span:first-of-type").each(function () {
  $(this).text($(this).text() + " [fot]");
});

Corey, [fot] Yehuda, Adam, Todd
Nobody, [fot] Jörn, Scott, Timo

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

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

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

$("#team span:first-of-type").prepend("* ");

* Corey, Yehuda, Adam
(other groups outside #team untouched)

var a = $("div span:first-of-type").map(function () {
  return $(this).text();
}).get().join(", ");

var b = $("div span:nth-of-type(1)").map(function () {
  return $(this).text();
}).get().join(", ");

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

fot=[Corey,, Nobody,] nth=[Corey,, Nobody,]

$("article p:first-of-type").prepend("[lead] ");
$("#out").text($("article p:first-of-type").text());

[lead] Intro paragraph…
(h2 before it does not block the match)

Performance Notes

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

Key Takeaways