Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
nth-child
nth-of-type
communitycreator

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

Youssef Zidan

: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)

RELATED TAGS

css
nth-child
nth-of-type
communitycreator
RELATED COURSES

View all Courses

Keep Exploring