[an error occurred while processing this directive]

Hierarchical Selectors

                         

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">&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;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.

                         

[an error occurred while processing this directive]