jQuery parent > child Selector

Read

Discuss

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:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 14 Nov, 2022

jQuery parent > child Selector

HTML

HTML

Please Login to comment...