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.
<!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.
<!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>
Output:
