jQuery parent descendant Selector

Quiz

The parent-descendant selector in jQuery is used to select all elements that are descendants of a specified parent element.

Descendant: An element that is nested within another element. It includes children, grandchildren, great-grandchildren, etc., of that element.

Syntax

Following is the syntax of jQuery parent descendant Selector −

("parent descendant")

Parameters

Here is the description of the above syntax −

parent: Specifies the parent element.
descendant: Specifies the descendant elements to be selected.

Example 1

In the following example, we are using the "jQuery parent descendant Selector" to select all the <span> elements that are descendants of <div> −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div span").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <div>
        <p>This is a paragraph with a <span>span element</span> inside a div.</p>
        <div>
            This is a nested div with another <span>span element</span>.
        </div>
    </div>
    <p>This is a paragraph with a <span>span element</span> outside the div.</p>
</body>
</html>

After executing the above program, all the <span> elements that are descendants of <div> will be highlighted with yellow background color.

Example 2

In this example, we are selecting all <p> elements that are descendants of <section> −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("section p").hide();
        });
    </script>
</head>
<body>
    <section>
        <h1>Section Header</h1>
        <p>This is a paragraph inside a section.</p>
        <div>
            <p>This is a nested paragraph inside a div within a section.</p>
        </div>
    </section>
    <p>This is a paragraph outside the section.</p>
</body>
</html>

After executing, all <p> elements that are descendants of <section> will be hidden.

Example 3

Here, we are selecting all <li> elements that are descendants of <ul> −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // Select all <li> elements that are descendants of <ul>
            $("ul li").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <ul>
        <li>List item 1</li>
        <li>List item 2
            <ul>
                <li>Nested list item 1</li>
                <li>Nested list item 2</li>
            </ul>
        </li>
    </ul>
</body>
</html>

After executing, all <li> elements that are descendants of <ul> will be highlighted with yellow background color.

jquery_ref_selectors.htm

Print Page