हैस सेलेक्टर
:has सेलेक्टर उन एलिमेंट्स का चयन करता है,
जिनमें दिए गए सेलेक्टर के अनुसार कम से कम एक एलिमेंट
होता है, जरूरी नहीं कि सीधे तौर पर नेस्टेड चाइल्ड हो।
चूंकि :has CSS स्पेसिफिकेशन का हिस्सा नहीं है,
इसलिए आधुनिक ब्राउज़रों में बेहतर परफॉर्मेंस के लिए
इसके बजाय $("आपका css-सेलेक्टर").has(सेलेक्टर/DOM एलिमेंट)
का उपयोग करना बेहतर है।
सिंटैक्स
इस तरह हम एलिमेंट्स का चयन करते हैं:
$(':has(सेलेक्टर)');
इस तरह हम एलिमेंट्स का चयन करते हैं, अगर सेलेक्टर की सीधी नेस्टिंग जरूरी है:
$(':has(>सेलेक्टर)');
उदाहरण
आइए केवल उन पैराग्राफ का चयन करें जिनके अंदर
b टैग है और
उनके अंत में '!!!' टेक्स्ट जोड़ें:
<p>टेक्स्ट</p>
<p>टेक्स्ट</p>
<p><b>बोल्ड</b> टेक्स्ट</p>
<p><b>बोल्ड</b> टेक्स्ट</p>
$('p:has(b)').append('!!!');
HTML कोड इस तरह दिखेगा:
<p>टेक्स्ट</p>
<p>टेक्स्ट</p>
<p><b>बोल्ड</b> टेक्स्ट!!!</p>
<p><b>बोल्ड</b> टेक्स्ट!!!</p>