:nth-of-type()
Like `:nth-child()`, but counts only siblings with the same tag.
Syntax
selector:nth-of-type(an+b) { … }Parameters
| Parameter | Type | Description |
|---|---|---|
| n | number | A position among elements of this type. |
| odd | even | keyword | Odd or even positions among elements of this type. |
Examples
The heading does not count, so the first paragraph is found correctly:
<style>
p:first-of-type { font-weight: bold; }
p:nth-of-type(2) { color: teal; }
</style>
<div>
<h3>Heading</h3>
<p>First paragraph — bold although it is the second child.</p>
<p>Second paragraph.</p>
</div>Notes
:first-of-type and :last-of-type are short forms of :nth-of-type(1) and :nth-last-of-type(1). The type means the tag only — classes are not taken into account.
See also
- :nth-child() — Matches children by their position: the third, every even one, every third one.
- :first-child — Matches an element that is the first child of its parent.
In the tutorial
- Pseudo-classes — Styles for element states and positions — hover, focus, links, first-child, nth-child, not and form fields.