:has() Selector?:has(selector) (since jQuery 1.1.4) selects elements that contain at least one descendant matching selector — at any nesting depth, not only direct children.
$("div:has(p)"); // divs with a <p> inside
$("li:has(ul)"); // list items with a nested list
$("article:has(.error)"); // articles that hold an error
// Preferred today:
$("div").has("p"); // same idea, faster path| Need | Use |
|---|---|
| Parents with a matching descendant | $("el").has("sel") · legacy $("el:has(sel)") |
| The descendants themselves | .find() |
| Match by text content | :contains() |
| Direct children only | $("el > child") · .children() |
| Exclude matches | :not() |
:has()Pick containers based on what they hold — then prefer the .has() method in new code.
$("div"), $("li"), …).p, ul, .error, …).:has(selector) · Modern: call .has(selector).| Piece | Required? | Role |
|---|---|---|
| Preceding selector | Yes | Outer candidates to keep or drop |
Inner selector | Yes | Descendant that must exist somewhere inside |
.has() method | Recommended | Same filter; better with pure CSS base selects |
for each element E in $("outer")
if E contains at least one descendant matching "inner"
keep E
else
drop E
// Prefer:
$("outer").has("inner")| Goal | Code |
|---|---|
| Divs with a paragraph | $("div").has("p") |
| Legacy selector string | $("div:has(p)") |
| List items with nested lists | $("li").has("ul") |
| Cards with an error | $(".card").has(".error") |
| Get the paragraphs instead | $("div").find("p") |
| Match by text | $("div:contains(\"Hello\")") |
Highlight containers that contain a matching descendant — compare :has() and .has().
Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.
div:has(p)From the jQuery docs: add class test to divs that contain a paragraph.
$("div:has(p)").addClass("test");div is tested.p somewhere inside.test marks the matching containers..has() MethodSame result as :has(p) — the recommended performance pattern.
$("div").has("p").addClass("test");
// Same matches as $("div:has(p)")$("div") can use querySelectorAll..has("p") keeps containers with a p.li:has(ul)Bold list items that contain a nested sublist.
$("li:has(ul)").css("fontWeight", "bold");
// Modern: $("li").has("ul").css("fontWeight", "bold");li elements are candidates.ul.:has() vs :contains()Structure filter versus text substring — different matching rules.
console.log(":has(p) →", $("div:has(p)").length);
console.log(":contains(Hello) →", $("div:contains('Hello')").length);p element inside.Flag form groups that contain an .error message.
$(".field").has(".error").css({
border: "2px solid #dc2626",
padding: "8px"
});.field containers.| Case | What happens | Fix |
|---|---|---|
| Expecting only direct children | Deep descendants also match | Use > / .children() when depth must be 1 |
| Wanting the inner elements | :has returns parents | Use .find() |
| Matching by text | Wrong tool | Use :contains() |
Putting :has in a long selector | Slower — no native QSA path | Use $("css").has("sel") |
Bare $(":has(p)") | Scans too broadly | Always prefix: $("div:has(p)") |
:has() has been part of jQuery since 1.1.4. It works wherever jQuery runs, but as a jQuery extension it skips the native querySelectorAll fast path — prefer .has() in new code.
Supported across jQuery 1.x–3.x where the library is loaded. For modern apps, use $("sel").has("inner") instead of embedding :has() in the selector string.
Bottom line: Safe to use for learning and legacy code. Prefer .has() for performance on modern browsers.
| Approach | Cost | Best for |
|---|---|---|
$("css").has("sel") | Best | Modern browsers — official recommendation |
$("el:has(sel)") | Slower | Short demos / legacy tutorials |
| Huge DOM + deep trees | Can add up | Narrow the base set first |
Because :has() is a jQuery extension, the full query cannot ride native querySelectorAll. Select with CSS, then filter with .has().
$("el").has("sel") over $("el:has(sel)").:contains(); for inner nodes use :has() / .has().One line: :has(sel) keeps elements that contain sel — prefer .has(sel) in modern jQuery.
Select heading elements (h1–h6) in one go.
10 people found this page helpful