The :nth-child selector in CSS code is here it will allow you to select one or more elements according to the formula. It is used to style content based on parent and child relationship.
-
:nth-child iterates throughs elements from the top of the page. whereas by using :nth-last-child is through the bottom of the page
- :nth-of-type selector will allow you select one or more elements based on the formula
Syntax
:nth-child(even), :nth-child(odd), :nth-child(n+3)
For Example:-
first row
second row
third row
fourth row
fifth row
li{
background:#555;
}
li:nth-of-type(2n)
{
background:#B50462;
}
In the above code, Different row will show different color in the background. This will change by the formula nth-of-type(2n). when the value of n is 1, row 2 will change its background color. when the value is 2, row 4 will active itself.
0 Comment(s)