jQuery child Selectors



jQuery child selector $("A> B") is used to select elements specified by the child "B" of elements specified by parent "A".

For example, 

    $("body > p")
selects all elements matched by <p> that are child of an element matched by <body>. Notice that on the direct child element will match and the grandchild, great-grandchild will not match.
Take a look at the following example, where we have changed the border of the css element based upon the selection. Do not worry about understanding the .css function we have used. Just understand that the function is used to make a 2 pixel red border around the form. 


<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
 <style type="text/css">
  div { padding:8px 0px 8px 8px; }
 </style>
</head>
<script type="text/javascript">
 $(document).ready(function(){
  $("form > input").css("border", "2px solid red");
 });
 </script>

<body>
 
<h1>Reference Designer jQuery child example</h1>
 <form>
	<label>Enter your Name : </label><input name="textbox1">
 	<div class="level1">
		<label>Your Address</label><input name="textbox2">
	</div>
 	<div class="level1">
	   <div class="level2">
	    <label>Phone Number : </label><input name="textbox3">
	   </div>
	</div>
 	<label>Your Wife Name </label><input name="textbox4">
</form>
 
<div>It is under div</div>
<p> Some text in p tag</p>
<div>some text in div tag</div>
<p> Some text in p   </p>
 
</body>
</html>

You may like to try this example here.

Notice that the selector 

 $("form > input").css("border", "2px solid red");

It select the Inputs corresponding to "Enter Your Name" and "Ehter Your wife Name". The Input in front of the "Your Address" is not selected since it is grandchild and not direct child. If you want to highlight the Input in front of "Your Address, you can do like this. 
 $("form > div >h;  input")