jQuery :has() Selector

What You’ll Learn

The :has() selector matches elements that contain at least one descendant matching the inner selector — at any nesting depth. jQuery extension since 1.1.4; official docs recommend the .has() method for performance.

Introduction

Often you need the container, not the inner element — highlight the card that holds an error message, style list items that contain sublists, or flag sections missing required fields. The jQuery :has() pseudo-class selects parents based on what they contain inside the DOM tree.

jQuery has supported :has() since version 1.1.4. Official documentation states that it matches elements containing at least one element that matches the specified selector — descendants at any depth, not just direct children. For better performance, use $("div").has("p") instead of embedding :has() in the selector string.

Understanding the :has() Selector

Think of :has() as “keep this element if something matching lives inside”:

• <div><p>Hello</p></div> + div:has(p) → matches.
• <div>Hello again!</div> (no p) + div:has(p) → no match.
• <div><section><p>…</p></section></div> → still matches — p is a descendant.
• Inner argument can be any selector — li:has(ul), article:has(.error).

📝 Syntax

Official jQuery API form (since 1.1.4):

jQuery( ":has(selector)" )

// typical usage — prefix with element:
$( "div:has(p)" )
$( "li:has(ul)" )
$( "article:has(.error)" )

// recommended — .has() method:
$( "div" ).has( "p" )

Parameters

• selector — any jQuery selector; at least one matching descendant must exist inside the candidate element.

Return value

• A jQuery object containing every outer element that has a matching descendant.
• Empty collection when no containers match.

Official jQuery API example

$( "div:has(p)" ).addClass( "test" );

Examples Gallery

Example 1 follows the official jQuery div:has(p) demo. Examples 2–5 cover the .has() method, nested lists, contrast with :contains(), and error-state parent selection.

$( "div:has(p)" ).addClass( "test" );

div with <p>Hello in a paragraph</p> → .test (red inset border)
div with "Hello again! (with no paragraph)" → unchanged

// legacy selector string:
// $( "div:has(p)" ).addClass( "test" );

// recommended:
$( "div" ).has( "p" ).addClass( "test" );

Same visual result as div:has(p)
Uses pure CSS div selector, then .has("p") filter

$( "li:has(ul)" ).css( "fontWeight", "bold" );

Products and Settings (contain nested ul) → bold
Leaf items without sublists → normal weight

console.log( ":has(p) →", $( "div:has(p)" ).length );
console.log( ":contains('Hello') →", $( "div:contains('Hello')" ).length );

:has(p) → 1 (only div with p element)
:contains('Hello') → 2 (both divs include "Hello" text)

$( "form:has(.error)" ).addClass( "has-errors" );

Signup form (contains .error field) → .has-errors border
Contact form (all valid) → unchanged

🚀 Common Use Cases

• Content blocks — style div:has(p) as in the official demo.
• Navigation — bold li:has(ul) items with dropdown submenus.
• Forms — flag form:has(.error) or form:has(:invalid).
• Tables — highlight tr:has(input:checked) selected rows.
• Cards — emphasize .card:has(img) with media.
• Performance — prefer .has() method over :has() in strings.

📝 Notes

• Available since jQuery 1.1.4 — jQuery extension in selector strings.
• Inner selector can be any valid jQuery selector expression.
• Matches descendants at any depth — not limited to direct children.
• Prefer $("div").has("p") over $("div:has(p)") per official docs.
• Not the same as attribute [name] or text :contains().
• Modern CSS defines its own :has() — distinguish from jQuery’s historical extension.

💡 Best Practices