jQuery :has() Selector

The jQuery :has() selector select the elements that contain one or more matching specified element inside them. If you want to find only the elements that contain the matching elements, you can use the selector.

Syntax of jQuery :has() Selector

There is two syntaxes for the selector which are given below. The first syntax used to select only the single matching elements. However, you can select multiple matching elements using the second syntax given for multiple selectors.

For Single Selector


The above syntax selects the element matching with the single specified element.

For Multiple Selector

$(“:has(selector1, selector2, selector3, …selectorN)”)

The above syntax selects the elements matching with the multiple specified element.

Parameter Description

Sr No Parameter Name Description
1 selector
  • Specify the element name you want to select. You can use the class name with a single dot(.) at the start. If you prefer id, you have to use it with hash(#) sign at the start.
  • Required

Let it be more clear with the example given below for the single and the multiple selectors.

jQuery :has() Selector Select Single Matching Element Inside

Suppose you want to select the table cells that contain the HTML span element. You have to use the selector and specify the element to select the matching cells. It will be easy for you to identify the cells that contain the span element.

The below example selects the matching cells on button click.


Test it Live


Sr No Name Language
1 Java Programming Language
2 C++ Programming Language
3 SQL(Structured Query Language) Query Language
4 PHP(Preprocessor Hypertext) Programming Language
5 HTML(Hypertext Markup Language) Markup Language

The above example contains the table and the button. If you check the element, you cannot find out the cells that contains the span tag. Just click the button given above to highlight the cells. It applies the ‘yellow’ color to the matching cell items.

Select All Elements with Multiple Matching Element Inside

If you want to select the elements with multiple matching elements inside of them. You have to use the example given below using jQuery :has() Selector. It selects the paragraphs that contain the HTML span and HTML em tag.


Test it Live


Welcome to our website Tutorialdeep!

Learn from live examples and codes.

Add effects to your using jQuery

Use codes anywhere on your project.

There are four paragraphs in the above example. You don’t have an idea about which paragraph contains the span and the em tag. Click the button to highlight the matching paragraphs containing span and em tags. This is the way you can use the jQuery :has() Selector.