Open In App

jQuery :has() Selector

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The jQuery :has() selector in jQuery is used to select all elements that have one or more elements inside of them, that match the specified selector. 

Syntax:

$(":has(selector)")

Parameter: This selector contains a single parameter selector which is mandatory and used to specify the element to select. It is also required to accept any kind of selector. 

Example 1: This example uses:has selector to select <h2> span element to create a solid green border. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>jQuery :has() Selector</title>
    <script src=
    </script>
    <!-- Script to use :has selector -->
    <script>
        $(document).ready(function () {
            $("h2:has(span)").css("border", "solid green");
        });
    </script>
</head>
 
<body>
    <center>
        <h1 id="geeks1" style="color:green;">
            GeeksForGeeks
        </h1>
        <h2 id="geeks2">
            <span>
                jQuery :has() Selector
            </span>
        </h2>
    </center>
</body>
 
</html>


Output:

  

Example 2: This example uses:has selector to select elements and create a border. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>jQuery :has() Selector</title>
    <script src=
    </script>
    <!-- Script to use :has selector -->
    <script>
        $(document).ready(function () {
            $("body:has(h1, span)").css("border", "solid green");
        });
    </script>
</head>
 
<body>
    <center>
        <h1 id="geeks1" style="color:green;">
            GeeksForGeeks
        </h1>
        <h2 id="geeks2">
            <span>
                jQuery :has() Selector
            </span>
        </h2>
    </center>
</body>
 
</html>


Output:

 



Last Updated : 06 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads