Home jQuery Selectors :parent jQuery :parent Selector Definition
What Is :parent? :parent selects every element that has at least one child node — an element or a text node. It is the inverse of :empty
!
Not CSS / jQuery extension :parent is not in the CSS spec. Prefer a CSS query first, then .filter(":parent"). Do not confuse with .parent()
$(":parent")
$("td:parent") → cells with text or elements
$(".cell").filter(":parent") → official performance pattern
<td>Value 1</td> → matches (:parent)
<td></td> → no match (empty)
<div> </div> → matches (whitespace text counts)
≠ $("span").parent() // method — climbs UP Approach
How to Use :parent Select candidates, then keep only those that contain at least one child node.
Choose a base selector (td, .box, and so on). Add :parent, or use .filter(":parent") after a CSS query. Remember: text nodes count — even a space. Use .parent() only when you need to climb to an ancestor. Piece Required? Role Base selector Usually Limits which elements are tested :parentYes Keeps elements with ≥1 child node Child nodes — Elements or text (including whitespace)
Pseudocode candidates = find(baseSelector)
result = empty
for each el in candidates:
if el has any child node (element or text):
keep el
return jQuery(result) Reference
Cheat Sheet Keep these facts handy while filtering has-children elements.
Topic Detail Syntax $(":parent") / $("sel").filter(":parent")Rule ≥1 child node (element or text) Inverse :emptyvs .parent() Filter has-children vs climb upward Whitespace Counts as a text child CSS? No — jQuery extension Since jQuery 1.0
Try it
Live Preview Run selectors on the official-style table: filled cells vs empty cells.
Code
jQuery Examples Short, copy-ready snippets. Open a browser console with jQuery loaded, or use Try It Yourself for a live editor.
1. Official td:parent 2. vs :empty 3. Whitespace 4. .filter(":parent") 5. vs .parent() Example 1 — Official Demo: td:parent Find table cells that contain text or elements (jQuery API example).
var $hits = $("td:parent");
console.log($hits.length);
console.log($hits.map(function () {
return this.textContent.trim() || "(empty text)";
}).get().join(", ")); How It Works Select all cells. Four td elements exist in the demo table.Keep has-children. :parent keeps cells with a text child.Drop empties. Truly empty cells have zero child nodes.Official effect. The API demo fades those two cells with fadeTo.Example 2 — :parent vs :empty Every in-scope element is one or the other — they are inverses.
console.log(":parent →", $(".box:parent").length);
console.log(":empty →", $(".box:empty").length);
console.log("total →", $(".box").length); :parent → 2
:empty → 1
total → 3 How It Works Text box. Matches :parent.Span box. Matches :parent (element child).Empty box. Matches :emptyPartition. Counts add up to the total set.Example 3 — Whitespace Counts as a Child A single space is a text node — so the element is :parent, not :empty.
console.log(":parent →", $("#space:parent").length);
console.log(":empty →", $("#space:empty").length);
console.log("childNodes →", document.getElementById("space").childNodes.length); :parent → 1
:empty → 0
childNodes → 1 How It Works Markup. <div id="space"> </div> holds a space character.Text node exists. childNodes.length is 1.:parent matches.:empty fails.Example 4 — Prefer .filter(":parent") Official performance pattern: CSS select first, then filter with the extension.
var $byPseudo = $(".cell:parent");
var $byFilter = $(".cell").filter(":parent");
console.log("same size:", $byPseudo.length === $byFilter.length);
console.log("texts:", $byFilter.map(function () {
return this.textContent.trim();
}).get().join(", ")); same size: true
texts: A, C How It Works CSS query. $(".cell") can use native querySelectorAll.Filter. .filter(":parent") applies the jQuery extension.Same nodes. Length matches $(".cell:parent").Official advice. Best performance pattern from the API docs.Example 5 — :parent vs .parent() One filters for has-children; the other climbs to an ancestor.
console.log("li:parent →", $("li:parent").length);
console.log("span.parent() →", $("span").parent().prop("tagName"));
console.log("span.parent() text →", $("span").parent().text().trim()); li:parent → 2
span.parent() → LI
span.parent() text → Item with span How It Works li:parent.Empty li. Dropped — no child nodes..parent().LI.Different jobs. See .parent()Edge Cases & Pitfalls Check these before relying on :parent in real projects.
name Not “get my parent” :parent means “this element is a parent (has children).” Use .parent() to climb up.
text Whitespace counts A space or newline inside a tag makes it :parent and blocks :empty.
css jQuery extension only Not in querySelectorAll. Prefer $("td").filter(":parent") on large pages.
void Void elements never match input, img, br, hr are empty by definition — they never match :parent.
Compatibility
Browser Support :parent is a jQuery extension (not CSS), available since 1.0 . It works wherever jQuery runs, but cannot use native querySelectorAll alone.
✓ jQuery 1.0+ · Extension
jQuery :parent Works in all browsers with jQuery. Not available in native querySelectorAll. Prefer .filter(':parent') after a CSS selector.
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support :parent jQuery only
Bottom line: Use :parent for has-children filtering; use .parent() when you need to traverse up the DOM.
Analysis
Performance Notes Approach Cost Best for $("td").filter(":parent")CSS query + filter Official recommended pattern $("td:parent")Sizzle path (no QSA) Small pages / learning $("td:empty")Native CSS possible Inverse filter (standard CSS)
Official docs: because :parent is not CSS, select with a pure CSS selector first, then filter. That lets the browser optimize the initial query.
Remember
Key Takeaways One line: :parent means “this element has children” — not “give me its parent.”
Frequently Asked Questions What does the :parent selector do? :parent selects every element that has at least one child node — an element or a text node. $("td:parent") matches table cells that contain text or nested markup. Available since jQuery 1.0.
What is the opposite of :parent? :empty is the inverse — elements with no children at all. Official docs describe :parent and :empty as opposites. Whitespace-only text makes an element :parent but not :empty.
Do text nodes count? Yes. Official docs: child nodes include text nodes. A div with only "Hello" (or even a single space) matches div:parent.
How is :parent different from .parent()? :parent filters the matched set for elements that have children. .parent() traverses upward to each element's immediate parent. Official docs point to .parent() / .parents() when you need ancestors.
Is :parent standard CSS? No. :parent is a jQuery extension and cannot use querySelectorAll alone. Prefer $('.cell').filter(':parent') for performance.
Do void elements match :parent? No. Elements empty by definition — input, img, br, hr — never match :parent. A p with only text does match.
Next: :eq() Selector Select a single element by its zero-based index in the matched set.
:eq tutorial → About the author Developer, cloud engineer, and technical writer
I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.
11 people found this page helpful
