Skip to content
Related Articles

Related Articles

jQuery :has() Selector

Improve Article
Save Article
  • Last Updated : 14 Nov, 2022
Improve Article
Save Article

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

Syntax:

$(":has(selector)")

Parameter: This selector contains 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 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 element and create 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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!