How to use nth-of-type pesudo class in CSS


This is a pseudo-class.
This allows you to select one or more elements based on their source order, according to a formula.
This is similar as nth-child.

Standard Formula


the syntax ‘an+b’ is here by expressed:

‘a’ is an integer value.
‘n’ is the literal letter ‘n’.
‘+’ is an operator and may be either ‘+’ or ‘-‘.
‘b’ is an integer and is required if an operator is included in the formula.

Suppose we are building a CSS listing, and we want to change background color of each second column:

Rather than adding a class on last item , we can use ::nth-of-type

Here you can see example

here are some of more examples

1 :first-of-type


2 :last-of-type


3 :nth-last-of-type