The :nth-of-type() pseudo-class matches elements by their 1-based position among siblings of the same tag name. Other element types are skipped in that count.
Example: p:nth-of-type(2) is the second p, even if a div sits between paragraphs. Contrast with :nth-child(), which counts every sibling.
Supported across modern browsers since mid-2015 (CSS3 Selectors). Same odd / even / An+B patterns as the other :nth-* selectors.
:nth-of-type( <An+B> | even | odd)Examples: p:nth-of-type(1), dd:nth-of-type(even), span:nth-of-type(-n+3).
Pass one pattern; indices count same-tag siblings from the start:
| Pattern | Matches (same type) | Try it |
|---|---|---|
odd / 2n+1 | 1st, 3rd, 5th… of that type | Try it |
even / 2n | 2nd, 4th, 6th… of that type | Try it |
2 (number) | Only the 2nd of that type | Try it |
-n+3 | First three of that type | Try it |
1 / :first-of-type | First element of that type |
:nth-of-type()Pick a tag, count only that tag from the start, then style.
:nth-child().p, span, dd, …).:nth-of-type(pattern) with odd, a number, or An+B.| Piece | Required? | Role |
|---|---|---|
| Element type | Yes | Defines which siblings enter the count |
| Pattern | Yes | odd, even, number, or An+B |
| Shared parent | Yes | Siblings must share one parent |
| Other tags | — | Present but ignored in the type count |
Mixed siblings: only span nodes are counted from the start. Other tags stay unmarked.
Same-type counting from the start, with mixed siblings where it matters. Use Try It Yourself for a live editor.
Stripe paragraphs by type index — other tags do not matter.
<style>
p:nth-of-type(odd) {
background: #dbeafe;
}
</style>
<article>
<h2>Title</h2>
<p>One</p>
<p>Two</p>
<p>Three</p>
</article>p tags count. The h2 is ignored for type indices.2n+1 among paragraphs.A divider between paragraphs does not change the second p.
<style>
p:nth-of-type(2) {
color: #b91c1c;
font-weight: 700;
}
</style>
<div>
<p>First</p>
<hr>
<p>Second</p>
<p>Third</p>
</div>hr is skipped.2 matches “Second” — still the 2nd p.p:nth-child(2) would fail here because child 2 is the hr.Match a range with -n+3 among the same tag.
<style>
span:nth-of-type(-n+3) {
border-bottom: 3px solid #2563eb;
}
</style>
<div>
<span>A</span>
<em>skip</em>
<span>B</span>
<span>C</span>
<span>D</span>
</div>em is ignored.-n+3 matches A, B, and C.:nth-last-of-type(-n+3).Most mix-ups come from expecting class-based counting or child indices.
p:nth-of-type(2) is not always p:nth-child(2). Prefer of-type when other tags sit between matches.
Counting uses the tag name. For filtered counting by class, use :nth-child(… of .class) where supported.
p.fancy:nth-of-type(odd) means “odd p that also has .fancy” — the odd count is still among all p tags.
(1) equals :first-of-typePrefer :first-of-type when you only need the first same-tag sibling.
:nth-of-type() is a browser CSS pseudo-class. Node.js, Deno, and Bun do not apply it.
odd, even, and An+B among same-type siblings have been available across browsers for years (CSS3 Selectors). Internet Explorer 9+ supports this selector.
Bottom line: Safe for everyday same-type patterns in mixed markup. This is not a JavaScript runtime API.
:nth-child().p:nth-of-type(odd) { … }.:nth-last-of-type().One line: :nth-of-type() paints by same-tag position — ignore other elements, count from the start.
Learn how to style an element when it is the sole child of its parent.
5 people found this page helpful