Home Ajax Jquery Hierarchical Selectors

Hierarchical Selectors
Posted on: September 15, 2010 at 12:00 AM

The Hierarchical Selectors are selectors used for selecting elements which may be sibling , adjacent, child or descendant elements.

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

Learn from experts! Attend jQuery Training classes.

Related Tags for Hierarchical Selectors:

«Previous Index Next»