:parent JQ Home  <<  Selectors  <<  :parent

• <<    :has Selector
• :button Selector     >>

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.

Syntax

Parameters

None.

Return

N/A.

:parent Examples Selectors  <<  Top

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).

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

Related Tutorials

jQuery Basic Tutorials - Lesson 4 - jQuery Selectors

• <<    :has Selector
• :button Selector     >>