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)