What Does the jQuery :parent Selector Select?

This article explains the purpose and behavior of the jQuery :parent pseudo-class selector within web development. It details exactly what types of elements the selector targets, contrasts it with common DOM traversal methods to prevent frequent developer misconceptions, and demonstrates practical usage examples to show how it functions in real-world code.

In jQuery, the :parent pseudo-class selector selects all elements that contain at least one child node. A child node can be either another HTML element or a text node (including whitespace). Essentially, :parent matches any element that is not empty, making it the exact opposite of the :empty selector.

A common point of confusion among developers is mistaking the :parent selector for the .parent() traversal method:

  • The :parent selector (e.g., $("td:parent")) looks at the selected elements themselves and filters for those that act as parents to other content.
  • The .parent() method (e.g., $("td").parent()) traverses upward in the DOM tree to select the direct ancestor of the targeted element.

Syntax and Examples

The basic syntax for the selector is:

$(":parent")

When used alone, $(":parent") selects every non-empty element in the document, including <html>, <head>, and <body>. In practice, it is almost always paired with another selector to target specific non-empty elements.

Consider the following HTML markup:

<table>
  <tr>
    <td>Apples</td>
    <td></td>
    <td><span>Oranges</span></td>
    <td> </td>
  </tr>
</table>

If you apply the selector:

$("td:parent").css("background-color", "yellow");

jQuery will select and style:

  1. The first <td> because it contains text (Apples).
  2. The third <td> because it contains a child element (<span>).
  3. The fourth <td> because it contains whitespace, which the DOM treats as a text node.

The second <td> is ignored because it contains no elements, text, or whitespace.

Performance Note

Because :parent is a jQuery extension rather than a native CSS pseudo-class, browsers cannot use the native querySelectorAll() engine to optimize it. To achieve better performance, especially on large documents, filter with pure CSS selectors first (such as $("td").filter(":parent")).