jQuery parent > child Selector

Last Updated : 11 Jul, 2025

It is a jQuery Selector used to select all elements that are the direct child of its parent element.

Syntax:

("parent > child")

Parameter Values:

parent: Using this, the parent element will be selected.
child: Using this, the direct child element of the specified parent element will be selected.

Example 1:

HTML

<!DOCTYPE html> <html> <h1> <center>Geeks </center> </h1> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <script>  $(document).ready(function () {  $("div > span").css(  "background-color", "green");  });  </script> </head> <body> <h3>All <span> elements that are a direct child of <div> element are selected.</h3> <div style="border:1px solid black;"> <p>Geeks for Geeks <br> <span> jQuery parent > child Selector </span> </p> </div> <br> <div style="border:1px solid black;"> <p>Geeks for Geeks</p> <span> jQuery parent > child Selector </span> </div> </body> </html>

Output:

Example 2:

HTML

<!DOCTYPE html> <html> <h1> <center>Geeks </center> </h1> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </script> <script>  $(document).ready(function () {  $("div").css(  "background-color", "green");  });  </script> </head> <body> <h3>All <div> elements are selected.</h3> <div style="border:1px solid black;"> <p>Geeks for Geeks</p> <p>jQuery parent > child Selector </p> </div> </body> </html>