What is the difference between the descendant selector and the :has selector in jQuery?

Question

What is the difference between the Descendant selector and the :has selector ?

From the documentation:

Descendant selector

Description: Selects all elements that are descendants of a given ancestor.

A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element.

:has

Description: Selects elements which contain at least one element that matches the specified selector.

The expression $('div:has(p)') matches a <div> if a <p> exists anywhere among its descendants, not just as a direct child.

Even after reading the explanation, the difference is not clear to me. Can someone help me understand?

Answer 1

The descendant selector in div p selects the p descendants of the div .

The :has() selector in div:has(p) selects the div if it contains any p elements.

The bold parts are all you need to know. The rest can be seen as mere conditions as to which elements of those types are selected.

---

In CSS selector terms, the key selector is the right-most outer simple selector. The kind of elements that get picked up by jQuery (or by a browser's CSS parser) is the one in the key selector.

In the first selector, the key is p , because it's the right-most one, occurring after the descendant combinator (the space). This means a collection of p elements will be returned.

In the case of :has() , which is a pseudo-class, the p is an "inner" simple selector that is part of the :has() pseudo-class , not part of the entire "outer" selector. The key in that selector is therefore div , not p . This means a collection of div elements will be returned, rather than p elements in the first selector.

Answer 2

descendants -selector将选择实际的后代，而:has -selector将选择包含has（）中元素的父元素。