jQuery parent descendant Selector

jQuery | parent descendant Selector: Learn about the parent descendant Selector with its usages, syntax, examples.
Submitted by Pratishtha Saxena, on December 02, 2022

parent descendant Selector

In jQuery, selectors are a parameter through which we can select the HTML element. Selectors can comprise – class names, ids, tag names, attributes, etc. Basically, by using selectors, the appropriate HTML-DOM element can be selected and hence performed actions on it. Here, we are discussing the jQuery parent descendant Selector.

The jQuery parent descendant selector basically helps in the selection of all the descendant children of the parent tag specified. A descendant can be a child, grandchild, great-grandchild, and so on. Hence, even if the element is defined in a nested form within the specified parent element, then also this selector helps to select all of them.

parent descendant Selector Syntax

$('parent descendant');

The parent tag name is given preceding to the descendent elements tag that are needed to be selected.

Once the elements are selected, you can access them and perform the actions that you want to perform on them. The example given below shows the selection of the descendants of the parent 'div' tag on click by passing the appropriate selector.

jQuery parent descendant Selector Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery - Parent Descendant Selector</h2>
    <p>Click the button to get the descendant of the specified parent tag.</p>
    <button>Click Here</button>
    <hr>
    <div>
      <p>Child Element One</p>
      <span>
        Child Element Two
        <p>GrandChild Element One</p>
      </span>
      <p>Child Element Three</p>
    </div>
    <hr>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $("div p").css({"color":"red", "font-weight":"bold"});
        });
    });
  </script>
</html>

Output:

Example 1: jQuery parent descendant Selector

jQuery parent > child Selector

jQuery :contains() Selector

Comments and Discussions!

Load comments ↻