Parent selector

The :parent selector selects elements that are parents (that is, non-empty elements that contain the element or text). To get the parents or ancestors of a jQuery set, see the parent and parents methods. Since :parent is not part of the CSS spec, for better performance in modern browsers it is better to first filter the elements using a pure CSS selector, and then apply .filter(':parent').

Syntax

Getting parent elements:

javascript$(':parent');

Example

We have a table table with a green background, let's find the cells td that are parents and color them gray:

html<table>
  <tr><td>aaa</td><td></td></tr>
  <tr><td>bbb</td><td></td></tr>
  <tr><td>ccc</td><td></td></tr>
</table>
csstable {
  border: 1px;
}

td {
  width: 40px;
  background: green;
} 
javascript$('td:parent').css({background: '#ccc'});

See also

  • selector empty,
    which selects empty elements
  • method parent,
    which gets the immediate parent of the element
  • method parents,
    which selects elements that have no descendants (including text nodes)