Widely availableSupported across all major browsers. Safe to use in production.
Selectors Widely available

:nth-of-type() pseudo-classes

The :nth-of-type() and :nth-last-of-type() CSS functional pseudo-classes match elements based on their position among siblings of the same type. The :first-of-type, :last-of-type, and :only-of-type pseudo-classes match the first, last, and only elements of its type.

Selectors

Overview

The :nth-of-type() and :nth-last-of-type() CSS functional pseudo-classes match elements based on their position among siblings of the same type. The :first-of-type, :last-of-type, and :only-of-type pseudo-classes match the first, last, and only elements of its type.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:first-of-type
1
12
3.5
3.1
18
2
Other
css.selectors.last-of-type

`:last-of-type`
1
12
3.5
3.1
18
2
css.selectors.nth-last-of-type

`:nth-last-of-type()`
4
12
3.5
3.1
18
2
css.selectors.nth-of-type

`:nth-of-type()`
1
12
3.5
3.1
18
2
css.selectors.only-of-type

`: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

first. paragraph emphasis

CSS first. paragraph emphasis demo.

PreviewFullscreen

2th to indent

CSS 2th to indent demo.

PreviewFullscreen

only. image center

CSS only. image center demo.

PreviewFullscreen

Use cases

  • Using :nth-of-type() pseudo-classes

    The :nth-of-type() and :nth-last-of-type() CSS functional pseudo-classes match elements based on their position among siblings of the same type. The :first-of-type, :last-of-type, and :only-of-type pseudo-classes match the first, last, and only elements of its type.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features