Child ('parent > child')S2C Home « Selectors « Child ('parent > child')
Child selector.
Shorthand version $('parent > child')
Description
The ('parent > child') selector, selects all the specified direct child elements of the specified parent element.
Syntax
| Signature | Description |
|---|---|
jQuery('parent > child') | Child match |
Parameters
| Parameter | Description |
|---|---|
parent | A valid selector. |
child | A filter to select the direct child elements. |
Return
N/A.
Child ('parent > child') ExamplesTop
Selects all the specified direct child elements of the specified parent element.
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');
});
});