`:parent`S2C Home « Selectors « `:parent`

Parent selector.

Shorthand version $(':parent')

Description

The :parent selector, select all elements that are the parent of another element, including text nodes.

Inverse of the :empty selector.
Being a jQuery extension the :parent pseudo selector is not part of any current CSS specification. Therefore :parent cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.
If this selector is not preceded by another selector, the universal selector ("*") is implied and so the whole DOM will be searched. Use another selector as in the examples below to narrow the search and improve performance.

Signature	Description
`jQuery(':parent')`	Has children match

None.

N/A.

Select all elements that are the parent of another element, including text nodes.

In the example below we apply an orange backgroud to all 'i' elements that have a parent (italics above).


$(function(){
  $('#btn1').on('click', function() {
    $("i:parent").css('backgroundColor', 'orange');
  });
});

In the example below we apply a yellow backgroud to all 'code' elements that have a parent (all coded elements on page).


$(function(){
  $('#btn2').on('click', function() {
    $("code:parent").css('backgroundColor', 'yellow');
  });
});

In the example below we apply an silver backgroud to all 'h2' elements that have a parent (top left sidebar and main content headings).


$(function(){
  $('#btn3').on('click', function() {
    $("h2:parent").css('backgroundColor', 'silver');
  });
});