Descendant Selector (“ancestor descendant”)

descendant selector

Description: Selects all elements that are descendants of a given ancestor.

  • version added: 1.0jQuery( "ancestor descendant" )

    ancestor: Any valid selector.

    descendant: A selector to filter the descendant elements.

A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element.


Mark all inputs that are descendants of a form with a dotted blue border. Give a yellow background to inputs that are descendants of a fieldset that is a descendant of a form.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>descendant demo</title>
  form {
    border: 2px green solid;
    padding: 2px;
    margin: 0;
    background: #efe;
  div {
    color: red;
  fieldset {
    margin: 1px;
    padding: 3px;
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <div>Form is surrounded by the green border.</div>
  <label for="name">Child of form:</label>
  <input name="name" id="name">
    <label for="newsletter">Grandchild of form, child of fieldset:</label>
    <input name="newsletter" id="newsletter">
Sibling to form: <input name="none">
$( "form input" ).css( "border", "2px dotted blue" );
$( "form fieldset input" ).css( "backgroundColor", "yellow" );


© The jQuery Foundation and other contributors
Licensed under the MIT License.