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 = </ 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 = </ 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: