jQuery parent > child Selector

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:

Last Updated : 14 Nov, 2022

jQuery parent > child Selector

HTML

HTML

Please Login to comment...