:nth-of-type() pseudo-classes
The :nth-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name).
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 3.5 | 3.1 | 18 | 2 | |
| Other | ||||||
| `:first-of-type` | 1 | 12 | 3.5 | 3.1 | 18 | 2 |
| `:last-of-type` | 1 | 12 | 3.5 | 3.1 | 18 | 2 |
| `:nth-last-of-type()` | 4 | 12 | 3.5 | 3.1 | 18 | 2 |
| `:only-of-type` | 1 | 12 | 3.5 | 3.1 | 18 | 2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.
Notes 1 item(s)
Implementation note
- Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.
Notes 1 item(s)
Implementation note
- Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.
Notes 1 item(s)
Implementation note
- Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.
Notes 1 item(s)
Implementation note
- Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type.
Syntax
CSS
p:first-of-type {
font-size: 1.2em;
}
article p:nth-of-type(2) {
text-indent: 1em;
}
img:only-of-type {
display: block;
margin: 0 auto;
}Live demo
Use cases
-
Using :nth-of-type() pseudo-classes
The :nth-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name).
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.