jQuery | :has() Selector with example

The :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.

<!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 element and create 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:

My Personal Notes

Recommended Posts: