CSS :nth-child(n) selector

This selector is used for matching the elements based on their position regardless of the type of its parent. The n can either be a keyword, formula, or a number. It is used to match the elements based on their position within a group of siblings. It matches each element, which is the nth-child.

Syntax

Following are the syntax of this selector:

The "n" in the parentheses is the argument that represents the pattern for matching elements. It can be a functional notation, even or odd.

Odd values represent the elements whose position is odd in series like 1, 3, 5, etc. Similarly, the even values represent the elements whose position is even in series like 2, 4, 6, etc.

Functional notation (An+B): Functional notation represents those elements whose siblings position match the An+B pattern, where A is the integer step size, n is any positive integer starting from 0, and B is the integer offset.

Let' see some illustrations.

Example1

In this example, we are using the functional notation 3n+4 that will represent the elements:

(3×0)+4 = 4, (3×1)+4 =7, and many more.

Example2

In this example, we are going to use odd and even keywords that match those elements whose index is odd or even. It is to be noted that the first child index is 1.