हे आप सभी अद्भुत डेवलपर्स! इस पोस्ट में हम इसके उपयोग के बारे में जानेंगे :has() आपके अगले वेब प्रोजेक्ट में। :has() अपेक्षाकृत नया है लेकिन आपके यूआई में विभिन्न तत्वों पर नियंत्रण प्रदान करके फ्रंट एंड समुदाय में लोकप्रियता हासिल की है। आइए देखें कि छद्म वर्ग क्या है और हम इसका उपयोग कैसे कर सकते हैं।

वाक्य - विन्यास

RSI :has() सीएसएस छद्म-वर्ग किसी तत्व को स्टाइल करने में मदद करता है यदि उसके अंदर हम जो कुछ भी खोज रहे हैं वह मिल जाता है और उसका हिसाब-किताब किया जाता है। यह कहने जैसा है, "यदि इस बॉक्स के अंदर कुछ विशिष्ट है, तो बॉक्स को इस तरह और केवल इसी तरह से स्टाइल करें।"

:has(<direct-selector>) {
  /* ... */
}

“कार्यात्मक :has() सीएसएस छद्म वर्ग एक तत्व का प्रतिनिधित्व करता है यदि तर्क के रूप में पारित कोई भी सापेक्ष चयनकर्ता इस तत्व के खिलाफ एंकर होने पर कम से कम एक तत्व से मेल खाता है। यह छद्म वर्ग एक सापेक्ष चयनकर्ता सूची को एक तर्क के रूप में लेकर संदर्भ तत्व के संबंध में मूल तत्व या पिछले सहोदर तत्व का चयन करने का एक तरीका प्रस्तुत करता है।

अधिक सशक्त स्पष्टीकरण के लिए, एमडीएन यह पूरी तरह से करता है

स्टाइलिंग समस्या

पिछले वर्षों में हमारे पास सीएसएस के साथ उस मूल तत्व के प्रत्यक्ष बच्चे के आधार पर या किसी अन्य तत्व पर आधारित तत्व को स्टाइल करने का कोई तरीका नहीं था। ऐसा करने की स्थिति में, हमें कुछ जावास्क्रिप्ट का उपयोग करना होगा और HTML की संरचना के आधार पर कक्षाओं को चालू/बंद करना होगा। :has() उस समस्या का समाधान हो गया.

मान लीजिए कि आपके पास शीर्षक स्तर 1 तत्व है (h1) यह ब्लॉग सूची पृष्ठ पर किसी पोस्ट या उस प्रकृति की किसी चीज़ का शीर्षक है, और फिर आपके पास एक शीर्षक स्तर 2 है (h2) जो सीधे इसका अनुसरण करता है। यह h2 पोस्ट के लिए एक उप-शीर्षक हो सकता है। कि अगर h2 मौजूद है, महत्वपूर्ण है, और सीधे उसके बाद है h1, हो सकता है कि आप उस h1 को अलग दिखाना चाहें। इससे पहले आपको एक जेएस फ़ंक्शन लिखना होगा।

पुराने स्कूल का तरीका - जावास्क्रिप्ट

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

यह JS फ़ंक्शन उन सभी h1 की तलाश कर रहा है जिनमें a h2 इसे आगे बढ़ाना, और इसे बनाने के लिए हाइलाइट-सामग्री का एक वर्ग लागू करना h1 एक महत्वपूर्ण लेख के रूप में सामने आएं।

आधुनिक सीएसएस के प्रचलन में आने से नया और बेहतर! ब्राउज़र में हम जो कर सकते हैं उसकी क्षमताएं बहुत आगे बढ़ चुकी हैं। अब हम उन चीजों को करने के लिए सीएसएस का लाभ उठा सकते हैं जो हमें परंपरागत रूप से जावास्क्रिप्ट के साथ करना पड़ता है, सबकुछ नहीं, लेकिन कुछ चीजें।

न्यू स्कूल वे - सीएसएस

h1:has(+ h2) {
    color: blue;
}

इस पर कुछ :has() फेंकें!

अब आप उपयोग कर सकते हैं :has() वही चीज़ हासिल करने के लिए जो जेएस फ़ंक्शन ने किया था। यह CSS किसी भी h1 की जाँच कर रहा है और इसका उपयोग कर रहा है सहोदर संयोजक एक h2 की जाँच करना जो तुरंत इसका अनुसरण करता है, और पाठ में नीला रंग जोड़ता है। कब के कुछ उपयोग के मामले नीचे दिए गए हैं :has() काम आ सकता है.

:चयनकर्ता उदाहरण 1 है

एचटीएमएल

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

सीएसएस

h1:has(+ h2) {
    color: blue;
}

:चयनकर्ता उदाहरण 2 है

कई बार हम वेब पर काम करने वाले कर्मचारी छवियों के साथ छेड़छाड़ या काम कर रहे होते हैं। हम ऐसे टूल का उपयोग कर सकते हैं बादल का हमारी छवियों पर विभिन्न परिवर्तनों का उपयोग करने के लिए प्रदान करता है, लेकिन आम तौर पर हम ड्रॉप शैडो, बॉर्डर-रेडी और कैप्शन जोड़ना चाहते हैं (ऑल्ट विशेषता में वैकल्पिक पाठ के साथ भ्रमित न हों)।

नीचे दिए गए उदाहरण का उपयोग कर रहा हूँ :has() यह देखने के लिए कि क्या किसी आकृति या छवि में फिगकैप्शन तत्व है और यदि ऐसा है, तो यह छवि को अलग दिखाने के लिए कुछ पृष्ठभूमि और सीमा त्रिज्या लागू करता है।

एचटीएमएल

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

सीएसएस

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

क्या मैं :has() कि?

आप वह देख सकते हैं :has() आधुनिक ब्राउज़रों में इसे बहुत अच्छा समर्थन प्राप्त है।

:has() समुदाय में!

मैं यह देखने के लिए ट्विटर पर अपने नेटवर्क तक पहुंचा कि मेरे साथी इसका उपयोग कैसे कर रहे हैं :has() अपने दैनिक कार्य में और उन्हें इसके बारे में यही कहना था।

“मेरे पास एक उदाहरण तीसरे पक्ष के पैकेज से एक विशिष्ट एसवीजी को स्टाइल करना है @सॉसेडओपन क्योंकि मैं इसे सीधे तौर पर स्टाइल नहीं कर सकता था।”

यह क्या है निक टेलर से ओपनसॉस्ड उपयोग करने के बारे में कहना पड़ा :has().

svg:has(> #Mail) {
  stroke-width: 1;
}

हाहा, पिछली बार जब मैंने इसका उपयोग किया था तो मैं एक ट्री व्यू में कीबोर्ड कार्यक्षमता का निर्माण कर रहा था, इसलिए मुझे सहोदर तत्वों की स्थिति और वर्गों का पता लगाने की आवश्यकता थी, लेकिन यह अभी तक फ़ायरफ़ॉक्स में नहीं था इसलिए मुझे एक और समाधान ढूंढना पड़ा। 🫠

अभय पेरिनी से नेक्सकोर फ़ूड सेफ्टी टेक्नोलॉजीज, इंक.

यह देखना बहुत अच्छा है कि समुदाय के सदस्य वास्तविक दुनिया की समस्याओं को हल करने के लिए आधुनिक सीएसएस का उपयोग कैसे कर रहे हैं, और पहुंच के कारणों के लिए एबे द्वारा इसका उपयोग करने की सराहना भी करते हैं!

चीजों को ध्यान में रखें

उपयोग करते समय ध्यान रखने योग्य कुछ मुख्य बातें हैं :has() बुलेट पॉइंट से संदर्भित एमडीएन.

• छद्म वर्ग अपने तर्क में सबसे विशिष्ट चयनकर्ता की विशिष्टता को अपनाता है
• अगर :has() छद्म वर्ग स्वयं ब्राउज़र में समर्थित नहीं है, जब तक संपूर्ण चयनकर्ता ब्लॉक विफल नहीं हो जाएगा :has() क्षमाशील चयनकर्ता सूची में है, जैसे कि :is() और :where()
• RSI :has() छद्म वर्ग को दूसरे वर्ग में नेस्टेड नहीं किया जा सकता :has() 
• छद्म तत्व भी भीतर वैध चयनकर्ता नहीं हैं :has() और छद्म तत्व वैध एंकर नहीं हैं :has()

निष्कर्ष

जैसी उन्नत सुविधाओं सहित सीएसएस की शक्ति का उपयोग करना :has() छद्म वर्ग, हमें असाधारण वेब अनुभव तैयार करने में सक्षम बनाता है। सीएसएस की ताकत इसके कैस्केड और विशिष्टता में निहित है... सबसे अच्छा हिस्सा, जो हमें इसकी पूरी क्षमता का लाभ उठाने की अनुमति देता है। सीएसएस की क्षमताओं को अपनाकर, हम वेब डिज़ाइन और विकास को आगे बढ़ा सकते हैं, नई संभावनाओं को खोल सकते हैं और अभूतपूर्व उपयोगकर्ता इंटरफ़ेस बना सकते हैं।

लिंक:

• एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
• प्लेटोडेटा.नेटवर्क वर्टिकल जेनरेटिव एआई। स्वयं को शक्तिवान बनाएं। यहां पहुंचें।
• प्लेटोआईस्ट्रीम। Web3 इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
• प्लेटोईएसजी. कार्बन, क्लीनटेक, ऊर्जा, पर्यावरण, सौर, कचरा प्रबंधन। यहां पहुंचें।
• प्लेटोहेल्थ। बायोटेक और क्लिनिकल परीक्षण इंटेलिजेंस। यहां पहुंचें।
• स्रोत: https://css-tricks.com/the-power-of-has-in-css/