The :nth-of-type() CSS pseudo-class matches one or more elements of a given type, based on their position among a group of siblings.

There is no `:nth-of-type(0)`!

/* Selects every fourth <p> element
   among any group of siblings */
p:nth-of-type(4n) {
  color: lime;


The nth-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements.

See :nth-child for a more detailed explanation of its syntax.

Formal syntax

:nth-of-type( <nth> )

<nth> = <an-plus-b> | even | odd


Basic example


  <div>This element isn't counted.</div>
  <p>First paragraph. (left aligned)</p>
  <p>Second paragraph. (right aligned)</p>
  <div>This element isn't counted.</div>
  <p>Third paragraph. (left aligned)</p>


/* Align odd paragraphs to the left */
p:nth-of-type(2n+1) {
  text-align: left;

/* Align even paragraphs to the right */
p:nth-of-type(2n) {
  text-align: right;



Specification Status Comment
Selectors Level 4
The definition of ':nth-of-type' in that specification.
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
The definition of ':nth-of-type' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 3.5 (1.9.1) 9.0 9.5 3.1
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 (Yes) 1.0 (1.9.1) 9.0 9.5 3.1

See also

Document Tags and Contributors

 Last updated by: xgqfrms-GitHub,