Descendant Selector ("ancestor descendant")
Selects all elements that are descendants of a given ancestor.
.descendant(ancestor, descendant)
ancestor
| Selector | Any valid selector. |
descendant
| Selector | 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.
JS
<form>
<div>Form is surrounded by the green border.</div>
<label for="name">Child of form:</label>
<input name="name" id="name" />
<fieldset>
<label for="newsletter">Grandchild of form, child of fieldset:</label>
<input name="newsletter" id="newsletter" />
</fieldset>
</form>
Sibling to form: <input name="none" />
CSS
form {
border: 2px green solid;
padding: 2px;
margin: 0;
background: #efe;
}
div {
color: red;
}
fieldset {
margin: 1px;
padding: 3px;
}
HTML
$("form input").css("border", "2px dotted blue");
$("form fieldset input").css("backgroundColor", "yellow");
DEMO