Descendant ('ancestor descendant') JQ Home  <<  Selectors  <<  Descendant ('ancestor descendant')

• <<    Child Selector
• Next Adjacent Selector     >>

Descendant selector.

Shorthand version $('ancestor descendant')

Description

The ('ancestor descendant') selector, selects all specified descendant elements of the specified ancestor element.

• A descendant of an element could be a child, grandchild, great-grandchild etc.

Syntax

Parameters

Return

N/A.

Descendant ('ancestor descendant') Examples Selectors  <<  Top

Selects all specified descendant elements of the specified ancestor element.

The following example will select all 'td' descendants of 'tr' elements and change the background color of these elements to orange (table data elements).

$(function(){
  $('#btn1').on('click', function() {
    $('tr td').css('backgroundColor', 'orange');
  });
}); 

The following example will select all 'span' descendants of 'b' elements and change the background color of these elements to yellow (code examples).

$(function(){
  $('#btn2').on('click', function() {
    $('b span').css('backgroundColor', 'yellow');
  });
}); 

The following example will select all 'td' descendants of 'tr' elements and change the background color of these elements to silver (h3 headings in left sidebar and main content) .

$(function(){
  $('#btn3').on('click', function() {
    $('div h3').css('backgroundColor', 'silver');
  });
}); 

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors

• <<    Child Selector
• Next Adjacent Selector     >>