Open In App

jQuery parent descendant Selector

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery parent descendant Selector selects every element which is a descendant to a specific(parent) element. 

Syntax: 

$("parent descendant")

Example 1:  In this example, we are using parent descendant selector.

html




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <script>
        $(document).ready(function () {
            $("div span").css("color",
                "lightgreen");
        });
    </script>
</head>
 
<body>
    <h4>This div element has descendant span:</h4>
    <div>
        <span>DESCENDANT ELEMENT</span>
    </div>
</body>
 
</html>


Output: 

Example 2:  Here is another example, of parent descendant selector.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("div span").css("color", "lightgreen");
            });
        });
    </script>
</head>
 
<body>
    <h4>This div element has descendant span:</h4>
    <div>
        <span>DESCENDANT ELEMENT</span>
    </div>
    <br>
    <button>Change color</button>
</body>
 
</html>


Output:



Last Updated : 06 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads