Hi folks,
The 
:nth-child(n)
 selector is a pseudo element. which show the position on there parents element.
You can use 
    (even) and 
(odd) for all even or odd child element.
:nth-child(odd)
For example:-    
 tr:nth-child(2n+1)
 Represents the odd rows of an HTML table.    
 tr:nth-child(odd)
    Represents the odd rows of an HTML table.    
 tr:nth-child(2n)
    Represents the even rows of an HTML table.    
 tr:nth-child(even)
    Represents the even rows of an HTML table.    
 span:nth-child(0n+1)
    Represents a span element which is the first child of its parent; this is the same as the :first-child selector.    
 span:nth-child(1)
    Equivalent to the above.    
 span:nth-child(-n+3)
    Matches if the element is one of the first three children of its parent and also a span. 
    
    
    | n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 | 
    
| 0 | 1 | 1 | 4 | - | - | 3 | 
| 1 | 3 | 5 | 8 | 4 | 3 | 2 | 
| 2 | 5 | 9 | 12 | 8 | 8 | 1 | 
| 3 | 7 | 13 | 16 | 12 | 13 | - | 
| 4 | 9 | 17 | 20 | 16 | 18 | - | 
| 5 | 11 | 21 | 24 | 20 | 23 | - | 
    
As you can see, the matches are exactly the same, no need for the "+3". We can use negative n values, as well as use subtraction in the expressions.  
For example:-
4n-1:
(4 x 0) - 1 = -1 = no match    
    
(4 x 1) - 1 = 3 = 3rd Element
    
(4 x 2) - 1 = 7 = 7th Element    
 
                    
0 Comment(s)