Open In App

jQuery parent descendant Selector

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.




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




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


Article Tags :