← Back to pseudo-classes

CSS Pseudo-class / Element

:nth-of-type()

Structural

Selects elements based on their position among siblings of the same type.

Syntax

selector:nth-of-type(n) { }

Example

p:nth-of-type(2) { color: #3dffa0; }

Common use cases

  • Targeting specific paragraphs in an article
  • Styling alternating elements of the same tag
  • Selecting items in mixed-content containers

Practical developer insight

Unlike :nth-child, :nth-of-type only counts siblings of the same element type — more predictable in mixed layouts.

Related

:nth-child()