: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 ...
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 | |||||
9 | 12 | 1 | 3.5 | 9.5 | 3.1 |
Tablets / Mobile | |||||
![]() |
|||||
2 | 18 | 4 | 10.1 | 2 | 1.0 |
Last updated by CSSPortal on: 25th November 2019