jQuery Descendants 

In jQuery, descendants are elements that are nested inside a selected element.
jQuery provides several methods to traverse the DOM and find descendant elements, such as .children(), .find(), and descendant selectors.

1) What Are Descendants in jQuery?

• A descendant is any element inside another element, at any depth.

• In jQuery, we can find and manipulate descendant elements using:

  1. Descendant selectors

  2. .children() method

  3. .find() method

2) Using Descendant Selectors

A descendant selector in jQuery (and CSS) is used to select all elements inside another element, regardless of how deeply they are nested.

Syntax

$("parent descendant");

• parent → The element you want to start from.

• descendant → The elements inside the parent.

Example

$("div p").css("color", "blue");

• Selects all <p> elements inside any <div>.

3) Using .children() Method

The .children() method finds direct children (one level down) of the selected element.

Syntax

$(selector).children(filter);

Parameters

Example 1: Get All Children

$("#container").children().css("border", "1px solid red");

• Selects only immediate children of #container.

Example 2: Get Specific Children

$("#container").children("p").css("color", "green");

• Selects only <p> children inside #container.

4) Using .find() Method

The .find() method searches all descendant elements, at any depth.

Syntax

$(selector).find(filter);

Parameters

Example 1: Find All Descendants

$("#main").find("*").css("background", "yellow");

• Selects all descendants inside #main.

Example 2: Find Specific Descendants

$("#main").find("span").css("color", "blue");

• Selects all <span> tags inside #main, no matter how deeply nested.

5) Difference Between .children() and .find()

Example Comparison

// Finds only direct <li> children of <ul>
$("ul").children("li").css("color", "green");

// Finds <li> at all levels inside <ul>
$("ul").find("li").css("color", "blue");

6) Combining .children() and .find()

You can combine both methods to target specific nested elements:

$("#container")
    .children("div")      // Get direct <div> children
    .find("p")            // Find <p> inside those <div>s
    .css("color", "purple");

7) Practical Example

HTML

<div id="box">
  <div class="inner">
    <p>First paragraph</p>
    <span>Inside span</span>
  </div>
  <p>Outer paragraph</p>
</div>

jQuery

// Direct children of #box
$("#box").children().css("border", "2px solid red");

// Find all descendants of #box
$("#box").find("p").css("color", "blue");

8) Summary

• Descendants = Elements nested inside another element.

• Use descendant selectors for simple targeting.

• Use .children() → To get direct children.

• Use .find() → To get all descendants, no matter how deep.

• Combine both for precise control.