jQuery :has() Selector

Last Updated : 11 Jul, 2025

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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </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>