Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How nth-child Works ?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 527
    Comment on it
    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: