jQuery parent > child Selector Last Updated : 14 Nov, 2022 Improve Improve Like Article Like Save Share Report 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> Output: Like Article Suggest improvement Previous jQuery :only-of-type Selector Next jQuery parent descendant Selector Share your thoughts in the comments Add Your Comment Please Login to comment...