Share on Google+Share on Google+

Hierarchical Selectors

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

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>
body { font-size:14px; }
<script src="jquery-1.4.2.js"></script>

<h2><font color="blue">&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;Menu Card</font></h2>
<ul class="food">
<li>Fast food
<script>$(" > li").css("border", "3px double red");


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

div,span {
div#small {
<script src="jquery-1.4.2.js"></script>
<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>

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.


Posted on: September 15, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Discuss: Hierarchical Selectors  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image