Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS3 child and combinators selectors

    • 0
    • 3
    • 2
    • 0
    • 0
    • 0
    • 0
    • 0
    • 580
    Comment on it

    CSS3 child selector :
    CSS3 nth child selector, selects the child element of its parent.

    The common syntax: :nth-child(n)

    There are many other syntax related to nth-child. Few of them are:
    1. :nth-child(odd)
    For selecting the odd child element of its parent

    2. :nth-child(even)
    For selecting the even child element of its parent

    3. :nth-child(2n+1)
    For selecting the elements in the no. 3, 5, 7, 9, ... of its parent

    4. :nth-last-child(n)
    For selecting nth child element of its parent, counting from the last child

    Combinators selectors:

    The Combinators are of 4 types:
    1. Descendant selector
    2. Child selector
    3. Adjacent sibling selector
    4. general sibling selector

    Lets discuss it one by one:
    1. Descendant Selector: It selects all elements that are descendants of a specified element.
    Example:

    div span {
        color:#ddd;
    }
    

    2. Child Selector: It selects all elements that are the immediate children of a specified element.
    Example

    div > span {
        color:#ddd;
    }
    

    3. Adjacent Sibling Selector: It selects all elements that are the adjacent siblings of a specified element.
    Example

    div + span {
        color:#ddd;
    }
    

    4. General Sibling Selector: It selects all elements that are siblings of a specified element.
    Example

    div ~ span {
        color:#ddd;
    } 
    

    Hope this content will help you with CSS3 selectors.

 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: