jQuery | parent > child Selector

Last Updated : 26 Feb, 2019

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.

Return Value: It selects and returns all the direct child of the specified parent element.

Example-1:

<!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:

<!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:

My Personal Notes

Related Articles