Descendant Selector ("ancestor descendant")

Selects all elements that are descendants of a given ancestor.

.descendant(ancestor, descendant)

ancestor SelectorAny valid selector.
descendant SelectorA 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.

  <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 {
  border: 2px green solid;
  padding: 2px;
  margin: 0;
  background: #efe;
div {
  color: red;
fieldset {
  margin: 1px;
  padding: 3px;
$("form input").css("border", "2px dotted blue");
$("form fieldset input").css("backgroundColor", "yellow");

Looking for a Web Developer?


Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at :)