Hierarchical Selectors

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

<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:14px; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>

<h2><font color="blue">   
   Menu Card</font></h2>
<ul class="food">
<li>Chinese</li>
<li>Fast food
<ul><li>Burger</li><li>Pizza</li><li>Pasta</li></ul>
</li>
<li>Indian</li>
</ul>
<script>$("ul.food > li").css("border", "3px double red");
</script>
</body>
</html>

Output:

$("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 :

<script>$("form input").css("border", "2px dotted blue");</script>

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.

Example :

Finds all inputs that are next to a label.

<script>$("label + input").css("color", "blue").val("Labeled!")</script>

Next Siblings Selector (�??prev ~ siblings�??)

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.

Example :

<!DOCTYPE html>
<html>
<head>
<style>

div,span {
display:block;
width:80px;
height:80px;
margin:5px;
background:#bbffaa;
float:left;
font-size:14px;
}
div#small {
width:60px;
height:25px;
font-size:12px;
background:#fab;
}
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>

<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
<script>$("#prev ~ div").css("border", "3px groove blue");</script>
</body>
</html>

In this example , $("#prev ~ div") selects all the 'div' element after element of id name "prev" which is 'span'.

Output :

Download Source Code

Click here to see first demo

Click here to see second demo 0

Learn from experts! Attend jQuery Training classes.

Hierarchical Selectors