jQuery parent descendant Selector

Last Updated : 11 Jul, 2025

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= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </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= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">  </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>