jQuery :parent Selector

What You’ll Learn

The :parent selector matches elements that have at least one child node — an element or text. Available since jQuery 1.0; it is the inverse of :empty and a jQuery extension (not standard CSS).

Introduction

Tables, lists, and layout containers often mix filled cells with blank ones. jQuery’s :parent pseudo-class keeps elements that contain something inside them — nested markup or even a text node.

Official jQuery documentation describes :parent as the inverse of :empty. Both count text nodes as children, so a paragraph with only whitespace is :parent but not :empty. For climbing the DOM tree to an element’s ancestor, use the .parent() method instead — a different concept entirely.

Understanding the :parent Selector

Think of :parent as “has at least one child node”:

• td:parent → cells with text like “Value 1” or nested elements.
• td:empty → truly hollow cells — the complement in the same matched set.
• <input>, <img>, <br> → empty by HTML definition (no children).
• <p> with text → matches :parent; W3C recommends at least one child node in paragraphs.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":parent" )

// typical usage — chain after a selector:
$( "td:parent" )
$( "div.box:parent" )
$( "li:parent" )

// performance pattern:
$( ".cell" ).filter( ":parent" )

// NOT the same as traversing up:
$( "span" ).parent()   // method — returns parent elements

Parameters

• No arguments — keeps elements with at least one child node (element or text).

Return value

• A jQuery object containing every matching element (may be multiple).
• Empty collection when no elements in scope have children.

Official jQuery API example

// Finds all tds with children, including text
$( "td:parent" ).fadeTo( 1500, 0.3 );

Examples Gallery

Example 1 follows the official jQuery td:parent demo. Examples 2–5 compare with :empty, demonstrate the whitespace text trap, use the official .filter(':parent') pattern, and contrast with the .parent() method.

$( "td:parent" ).fadeTo( 1500, 0.3 );

// Only tds with child nodes (text counts) are faded

Value 1 and Value 2 cells → fade to 30% opacity
Empty td → unchanged solid green background

$( ".box:parent" ).css( "borderColor", "#2563eb" );
$( ".box:empty" ).css( "backgroundColor", "#fee2e2" );

console.log( ":parent →", $( ".box:parent" ).length );
console.log( ":empty →", $( ".box:empty" ).length );

:parent → 2 (boxes with span or text)
:empty → 1 (hollow box only)

console.log( ":parent →", $( "#space:parent" ).length );
console.log( ":empty →", $( "#space:empty" ).length );

:parent → 1 (whitespace counts)
:empty → 0

$( ".cell" ).filter( ":parent" ).addClass( "filled" );

// Browser optimizes $(".cell"); jQuery filters to nodes with children

Cells A and B → filled class
Empty cell → no class

// :parent — keep li elements that contain something
console.log( "li:parent →", $( "li:parent" ).length );

// .parent() — from the span, go up to its li parent
console.log( "span.parent() →", $( "span" ).parent().prop( "tagName" ) );

li:parent → 2 (items with text or span)
span.parent() → LI (traversed upward)

🚀 Common Use Cases

• Table cells — highlight td:parent cells that contain data.
• Inverse of empty — style filled containers while :empty handles hollow ones.
• List cleanup — skip li:empty by selecting li:parent first.
• Form validation — detect wrapper divs that received user input (text nodes).
• Dynamic UI — fade or dim populated slots in dashboards.
• Performance — .filter(':parent') after a CSS class query.

📝 Notes

• Available since jQuery 1.0 — inverse of :empty (official docs).
• Child nodes include text nodes — whitespace prevents :empty and enables :parent.
• Not standard CSS — jQuery extension only; use .filter(':parent') for performance.
• Not the same as .parent() or .parents() — those traverse upward.
• <input>, <img>, <br>, <hr> are empty by definition.
• W3C recommends <p> have at least one child — text alone satisfies :parent.

💡 Best Practices