How it actually works?

:nth-child(n) is a pseudo selector that targeting of specific elements following a specific pattern that matches elements based on their position.

note: n can be an (even, odd), formula, or number

Syntax

selector:nth-child(n)
selector:nth-child(number) {   property: value }

simply targets every element that is the nth child of the parent element.

Let's target odd nth elements of the list.(1,3,5,7,.....)

li:nth-child(odd){
    background-color:#51E1ED;
}

Let's target Even the nth element of the list.(2,4,6,8....)

li:nth-child(even){
    background-color:#51E1ED;
}

Let's target from 4th child then evenly.

li:nth-child(2n+4){
    background-color:#51E1ED;
}

:nth-child really helps when we have to target specific childrens of the parent to style then effectively.

A great example of :nth-child for style a table

That's the one minute... see you soon.......

Linkedin:- https://www.linkedin.com/in/bharat-chavhan-563a881ba