The :first-of-type pseudo-class matches an element that is the first of its tag name among sibling elements.
Example: p:first-of-type styles the first p under a parent, even if an h2 comes before it. Same match as :nth-of-type(1). For “must be first child of any type,” use :first-child.
Not deprecated. A long-standing structural pseudo-class from Selectors Level 3 / 4.
:first-of-type { /* or */ E:first-of-type { … }Example: p:first-of-type { color: red; font-style: italic; }
:first-of-typePick the tag you care about, then select the first sibling of that type.
E:first-of-type for the first element of type E.:first-child.| Piece | Required? | Role |
|---|---|---|
| Parent with siblings | Yes | Matching is relative to one parent |
:first-of-type | Yes | First sibling of that element’s tag |
| Type selector | Optional* | Usually written as p:first-of-type; bare :first-of-type implies * |
*MDN: with no type written, the universal selector is implied.
Toggle between p:first-of-type and p:first-child on the same markup (heading before paragraphs).
Each snippet focuses on :first-of-type. Extra styles stay minimal for study. Use Try It Yourself for a live editor.
Style the first p even when an h2 comes first.
<style>
p:first-of-type {
color: red;
font-style: italic;
}
</style>
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>h2 and both p elements share one parent.p siblings, Paragraph 1 is first.h2 does not stop p:first-of-type.p:first-child would match nothing here.dd After Each TermHighlight the first definition under each term.
<style>
dt {
font-weight: bold;
}
dd:first-of-type {
border: 2px solid orange;
}
</style>
<dl>
<dt>Vegetables:</dt>
<dd>Tomatoes</dd>
<dd>Cucumbers</dd>
<dt>Fruits:</dt>
<dd>Apples</dd>
<dd>Mangos</dd>
</dl>dt/dd share the dl.dd only. dd:first-of-type matches the first dd in that sibling list (Tomatoes).dds. Cucumbers, Apples, and Mangos are not the first of type.dd” under the whole dl—not one per dt.Each parent can have its own first-of-type match.
<style>
article :first-of-type {
background-color: pink;
}
</style>
<article>
<div>This div is first!</div>
<div>This <span>nested span is first</span>!</div>
<p>This p qualifies!</p>
<div>This is the final div.</div>
</article>article :first-of-type looks for first-of-type under article.div and the only p match among article children.span is the first (and only) of its type inside its parent div.*. Writing :first-of-type without a tag means any type.Confusion with :first-child causes most mistakes.
:first-childNeed the absolute first child of any tag? Use :first-child.
dd per parentdd:first-of-type matches the first dd among all siblings in the dl, not the first under each dt.
:nth-of-type(1):first-of-type and :nth-of-type(1) select the same elements.
Each parent has its own sibling list. Nested containers can each match.
One p among siblings is still first of type. For “exactly one of that type,” use :only-of-type.
:first-of-type is a browser CSS selector. Node.js, Deno, and Bun do not evaluate it.
Supported in all modern browsers (Chrome 1+, Firefox 3.5+, Safari 3.1+, Edge 12+, IE 9+).
Bottom line: Safe for production structural styling. It is not a JavaScript runtime API.
E:first-of-type = first E among siblings.:nth-of-type(1).One line: :first-of-type styles the first element of that tag among siblings—even if another tag sits before it.
Style elements when they receive keyboard or pointer focus.
8 people found this page helpful