CSS :nth-of-type(n) selector selects every element that is the nth child of its type within its parent element. Unlike, the :nth-child selector, the :nth-of-type() selector selects every nth element of its type.
Here n can be a:
- Number – Like 1, 2, 3, 4, ……
- Keyword – Like
odd&even - Formula – Like (2n+1), (2n+2), (3n+1), etc.
As I previously said, the :nth-of-type() selector selects every nth element of its type. So, if we use :nth-of-type(3), it would select every 3rd element of its type. It means this 3rd element can be a <p>, <div>, <li> or any other 3rd element of its type.
The :nth-of-type(3) selector in the following example will select every 3rd element of its type and will set a yellow background color to it:
Example:
:nth-of-type(3){
background-color: yellow;
}
In the previous example, the :nth-of-type(3) selector selected every third element of type <p>, <div> and <li> and put a yellow background color.
However, in some situations, you might want to select the nth element of a specific type only, for ex: third element of type <p>.
To do this you can simply precede the :nth-of-type() selector with the type of the element that you want to select.
For example, if you want to select every third element of type <p>, you have to use p:nth-of-type(3).
Here is a working example:
Example:
p:nth-of-type(3){
background-color: yellow;
}
As I mentioned in the starting, the :nth-of-type() selector is not just limited to numbers, you can use keywords like even & odd too.
The keyword odd helps us selecting elements that are odd indexes while the keyword even selects elements that are at even indexes within their parent.
In the following example, the p:nth-of-type() selector sets a yellow background to those <p> elements that are at odd positions and cyan background to the even ones.
Example:
p:nth-of-type(odd){
background: yellow;
}
p:nth-of-type(even){
background: cyan;
}
You can also use a formula in the form of (an + b) to select and style multiple elements using the :nth-of-type() selector.
For example, if you use the formula (2n +0), it will select all the elements whose indexes are a multiple of 2 i.e. elements that are at positions 2, 4, 6, 8,.. and so on.
Similarly, if you use the formula (2n + 1), it will select elements that are at positions 1, 3, 5, 7, … and so on.
Here is a working example:
Example:
p:nth-of-type(2n+1){
background: yellow;
}
p:nth-of-type(2n+0){
background: cyan;
}
CSS Syntax
The syntax of the :nth-of-type() selector is as follows:
:nth-of-type(n){
CSS Styles;
}
Browser Support
The number in each cell of the table specifies the first version of the browser that fully supports the :nth-of-type() selector.
| Selector | |||||
| :nth-of-type(n) | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
