The Hierarchical Selectors are selectors used for selecting elements which may be sibling, adjacent, child or descendant elements.
Some of the main selectors are given below :
Child Selector (“parent > child”)
This selector is supported by all known web browsers like Safari, Firefox, Opera, Chrome, and Internet Explorer 7 and above. But Internet Explorer 6 and it's below versions doesn't support it.
Example : HierarchicalSelectors1.html
$("ul.food > li") selects all the li child of main ul and perform border creation :
Descendant Selector (“ancestor descendant”)
The descendent here could be child ,child's child, great grand child or any element down the hierarchy.
For example, see the below code carefully :
Here the form is ancestor and input is descendant of it. The blue border is applied on it by selecting it through Descendant Selector.
Next Adjacent Selector (“prev + next”)
This selector is used to select the next adjacent element. The element "prev" & "next" must be the child's of the same parent-this is a necessary condition.
Finds all inputs that are next to a label.
This selector selects the next elements to it not just next adjacent element like (“prev + next”) selector. It extends it reach to all following sibling elements not just immediately following sibling element.
In this example , $("#prev ~ div") selects all the 'div' element after element of id name "prev" which is 'span'.
Learn from experts! Attend jQuery Training classes.