:parent JQ 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.

Opposite 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 example below to narrow the search and improve performance.

Syntax

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

Parameters

None.

Return

N/A.

:parent Example 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 contain children.




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


Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 4 - jQuery Selectors