jQuery Descendant Selector

What Is ancestor descendant?

The descendant combinator is a space between two selectors (since jQuery 1.0). It selects every matching element nested under the ancestor — child, grandchild, or deeper. Official docs call it a standard CSS combinator.

$("form input")           // every input inside form (any depth)
$("form fieldset input")  // inputs under form → fieldset → …
$("ul li")                // every li in the tree
$("ul > li")              // top-level li only (child combinator)

// Method twin: $("#form").find("input")

How to Use ancestor descendant

Name the container, leave a space, then name what you want anywhere under it.

1. Write the ancestor selector on the left (prefer an id or class).
2. Add a space, then the descendant selector on the right.
3. Add more ancestors to narrow depth: form fieldset input.
4. Use > instead when only the next level should match.
5. If you already have a jQuery set, call .find() for the same idea.

Pseudocode

matches = []
for each ancestorElement matching "ancestor":
    for each nestedElement under ancestorElement:   // any depth
        if nestedElement matches "descendant":
            matches.add(nestedElement)

return matches

// Contrast — child (>):
// only inspect ancestorElement.children (first level)

Cheat Sheet

Keep these facts handy when choosing between a space and >.

Live Preview

Compare form input (any depth) with form > input (direct only) on a mini form.

$("form input").length
→ 2

matched → direct, nested

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var names = [];
$("form input").each(function () {
  names.push(this.name || this.value || "(input)");
});

$("#out").text(
  "Matched: " + names.length + "\n" +
  names.join(", ")
);

Matched: 2
direct, nested

$("#out").text(
  "form input: " + $("form input").length + "\n" +
  "form fieldset input: " + $("form fieldset input").length
);

form input: 2
form fieldset input: 1

$("#out").text(
  "ul.menu li (any depth): " + $("ul.menu li").length + "\n" +
  "ul.menu > li (direct): " + $("ul.menu > li").length
);

ul.menu li (any depth): 5
ul.menu > li (direct): 2

var viaSelector = $("#panel input").length;
var viaFind = $("#panel").find("input").length;

$("#out").text(
  "$('#panel input'): " + viaSelector + "\n" +
  "$('#panel').find('input'): " + viaFind
);

$('#panel input'): 2
$('#panel').find('input'): 2

var labels = [];
$("ul.menu li").each(function () {
  var text = $.trim(
    $(this).contents().filter(function () {
      return this.nodeType === 3;
    }).text()
  );
  if (text) labels.push(text);
});

$("#out").text(labels.join(" | "));

Home | Products | Phones | Laptops | Contact

Performance Notes

Descendant walks can visit many nodes. Start from a specific ancestor, and prefer > when deep matches are not needed.

Key Takeaways