:nth-of-type CSS Pseudo Class

Description

The :nth-of-type pseudo-class is used to add style to elements of the specified type based on the numbering in the element tree.

Syntax

element: nth-of-type (odd | even | <number> | <expression>) {...}

Values

  • oddAll odd item numbers.
  • evenAll even item numbers.
  • <number>The serial number of the child relative to its parent. Numbering starts with 1, this will be the first item in the list.
  • <expression>It is given in the form an ± b , where a and b are integers, and n is a counter that automatically takes the value 0, 1, 2 ...
If a is zero, then it is not written and the record is reduced to b. If b is zero, then it is also not specified and the expression is written in the form an. a and b can be negative numbers, in which case the plus sign changes to minus, for example: 5n-1.
By using negative values ​​of a and b, some results can also turn out to be negative or equal to zero. However, elements are affected only by positive values ​​due to the numbering of elements starting at 1.

Example

<div>
<div>This element isn't counted.</div>
<p>1st paragraph.</p>
<p>2nd paragraph.</p>
<div>This element isn't counted.</div>
<p>3rd paragraph.</p>
<p>4th paragraph.</p>
</div>
/* Odd paragraphs */
p:nth-of-type(2n+1) {
color: red;
}

/* Even paragraphs */
p:nth-of-type(2n) {
color: blue;
}

/* First paragraph */
p:nth-of-type(1) {
font-weight: bold;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
91213.59.53.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
218410.13.1X