jQuery :has() Selector

Posted in jQuery Tutorial

Updated on Apr 27, 2024

By Mari Selvan

👁️ 5 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

In the realm of jQuery, selectors play a crucial role in targeting specific elements within an HTML document. One such selector is the :has() selector, which enables you to select elements based on whether they contain certain descendants. Understanding how to effectively use the :has() selector can significantly enhance your ability to traverse and manipulate the DOM.

This comprehensive guide will walk you through the usage of the jQuery :has() selector with clear examples to illuminate its functionality.

🧠 Understanding :has() Selector

The :has() selector allows you to target elements that contain specific descendants, filtering the selection based on the existence of these descendants. This provides a powerful mechanism for selecting elements based on their content structure.

💡 Syntax

The syntax for the :has() selector is straightforward:

syntax.js

Copied

$("selector:has(selector)")

📝 Example

Selecting Elements Containing Specific Descendants:

Suppose you have a list of <div> elements, and you want to select only those that contain <span> elements within them. You can achieve this using the :has() selector as follows:
index.html
Copied
```
<div>
  <p>This div does not contain any span.</p>
</div>
<div>
  <span>This div contains a span.</span>
</div>
<div>
  <span>Another span-containing div.</span>
  <p>And it also contains a paragraph.</p>
</div>
```
example.js
Copied
```
$("div:has(span)").css("border", "2px solid red");
```
This will apply a red border to the <div> elements that contain <span> elements.
Styling Parent Elements Based on Child Elements:

You can use the :has() selector to style parent elements based on the presence of certain child elements. For example, let's add a background color to <div> elements containing <a> tags:
index.html
Copied
```
<div>
  <p>This div does not contain any anchor.</p>
</div>
<div>
  <a href="#">This div contains a link.</a>
</div>
<div>
  <a href="#">Another link-containing div.</a>
  <p>And it also contains a paragraph.</p>
</div>
```
example.js
Copied
```
$("div:has(a)").css("background-color", "lightblue");
```
This will set the background color of <div> elements containing <a> tags to light blue.
Filtering Elements Based on Complex Conditions:

You can create more complex selectors by combining the :has() selector with other jQuery selectors and methods. For instance, let's select <li> elements that contain <a> tags and have a specific class:
index.html
Copied
```
<ul>
  <li>This list item does not contain any link.</li>
  <li class="special"><a href="#">This list item contains a special link.</a></li>
  <li><a href="#">Another link-containing list item.</a></li>
</ul>
```
example.js
Copied
```
("li:has(a).special").css("font-weight", "bold");
```
This will make the text of the <li> element with both a <a> tag and the class special bold.

🎉 Conclusion

The jQuery :has() selector offers a powerful means of selecting elements based on the presence of specific descendants. Whether you need to style parent elements, filter based on complex conditions, or perform other manipulations, this selector provides a flexible and efficient solution.

By mastering its usage, you can effectively traverse and manipulate the DOM to create more dynamic and interactive web pages.