What are :nth-child and :nth-of-type selectors in CSS?

:nth-child

The :nth-child(n) selector is a CSS pseudo-class that allows us to select one or more elements based on their source order, where n can be a number, a keyword, or a formula.

Starting Template

We begin with a div container and inside it a div parent and inside the parent other ten div tags with the class child.

We’ll provide them with some CSS styles for visualization.

:nth-child(integer)

We select a specific child.

:nth-child(n)

:nth-child(n)

We select all children.

:nth-child(n)

:nth-child(n+3)

We select the third child, as well as all subsequent children.

:nth-child(n+3)

:nth-of-type

The :nth-of-type(n) selector works the same way but with a particular type.

Example

We select the first element of each type div and span.

:nth-of-type(1)