Child ('parent > child') JQ Home  <<  Selectors  <<  Child ('parent > child')

• <<    :text Selector
• Descendant Selector     >>

Child selector.

Shorthand version $('parent > child')

Description

The ('parent > child') selector, selects all the specified direct child elements of the specified parent element.

Syntax

Parameters

Return

N/A.

Child ('parent > child') Examples Selectors  <<  Top

Selects all the specified direct child elements of the specified parent element.

The following example will select direct descendant 'code' elements with a parent 'p' element and change their background color to yellow (changes at top of page).

$(function(){
  $('#btn1').on('click', function() {
    $('p > code').css('backgroundColor', 'yellow');
  });
}); 

The following example will select direct descendant 'a' elements with a parent 'td' element and change their background color to orange (links within table elements).

$(function(){
  $('#btn2').on('click', function() {
    $('td > a').css('backgroundColor', 'orange');
  });
}); 

The following example will select direct descendant 'h3' elements with a parent 'div' element and change their background color to silver (h3 headings in left sidebar).

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

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors

• <<    :text Selector
• Descendant Selector     >>