M

MLOG

हिन्दी

CSS :has() सिलेक्टर को जानें, जो पेरेंट सिलेक्शन के लिए एक गेम-चेंजर है। अपनी CSS स्टाइलिंग में क्रांति लाने के लिए व्यावहारिक उपयोग, क्रॉस-ब्राउज़र संगतता और उन्नत तकनीकें सीखें।

CSS :has() सिलेक्टर में महारत हासिल करना: पेरेंट सिलेक्शन की शक्ति को उजागर करना

सालों से, CSS डेवलपर्स अपने चिल्ड्रेन (children) के आधार पर पेरेंट एलिमेंट्स (parent elements) को सिलेक्ट करने के एक सरल और प्रभावी तरीके के लिए तरस रहे थे। अब इंतजार खत्म हुआ! :has() सूडो-क्लास आखिरकार आ गया है, और यह हमारे CSS लिखने के तरीके में क्रांति ला रहा है। यह शक्तिशाली सिलेक्टर आपको एक पेरेंट एलिमेंट को टारगेट करने की अनुमति देता है यदि उसमें कोई विशिष्ट चाइल्ड एलिमेंट (child element) हो, जो डायनामिक और रिस्पॉन्सिव स्टाइलिंग के लिए संभावनाओं की एक नई दुनिया खोलता है।

:has() सिलेक्टर क्या है?

:has() सूडो-क्लास एक CSS रिलेशनल सूडो-क्लास है जो एक सिलेक्टर लिस्ट को आर्गुमेंट के रूप में स्वीकार करता है। यह एक एलिमेंट का चयन करता है यदि सिलेक्टर लिस्ट में से कोई भी सिलेक्टर उस एलिमेंट के डिसेंडेंट्स (descendants) में से कम से कम एक एलिमेंट से मेल खाता है। सरल शब्दों में, यह जांचता है कि क्या किसी पेरेंट एलिमेंट में कोई विशिष्ट चाइल्ड है, और यदि ऐसा है, तो पेरेंट का चयन किया जाता है।

इसका मूल सिंटैक्स है:

parent:has(child) { /* CSS नियम */ }

यह parent एलिमेंट का चयन तभी करता है जब उसमें कम से कम एक child एलिमेंट हो।

:has() इतना महत्वपूर्ण क्यों है?

परंपरागत रूप से, CSS अपने चिल्ड्रेन के आधार पर पेरेंट एलिमेंट्स का चयन करने की क्षमता में सीमित रहा है। इस सीमा के कारण डायनामिक स्टाइलिंग प्राप्त करने के लिए अक्सर जटिल जावास्क्रिप्ट समाधानों या वर्कअराउंड की आवश्यकता होती थी। :has() सिलेक्टर इन बोझिल तरीकों की आवश्यकता को समाप्त करता है, जिससे क्लीनर, अधिक मेंटेनेबल और बेहतर परफॉर्मेंस वाला CSS कोड लिखा जा सकता है।

यहाँ बताया गया है कि :has() एक गेम-चेंजर क्यों है:

:has() सिलेक्टर के बुनियादी उदाहरण

आइए :has() सिलेक्टर की शक्ति को दर्शाने के लिए कुछ सरल उदाहरणों से शुरुआत करें।

उदाहरण 1: इमेज की उपस्थिति के आधार पर पेरेंट Div की स्टाइलिंग

मान लीजिए आप किसी <div> एलिमेंट में केवल तभी बॉर्डर जोड़ना चाहते हैं जब उसमें कोई <img> एलिमेंट हो:

div:has(img) { border: 2px solid blue; }

यह CSS नियम किसी भी <div> पर नीला बॉर्डर लागू करेगा जिसमें कम से कम एक <img> एलिमेंट हो।

उदाहरण 2: Span की उपस्थिति के आधार पर लिस्ट आइटम की स्टाइलिंग

मान लीजिए आपके पास आइटम्स की एक सूची है, और आप उस लिस्ट आइटम को हाइलाइट करना चाहते हैं जिसमें एक विशिष्ट क्लास वाला <span> एलिमेंट हो:

li:has(span.highlight) { background-color: yellow; }

यह CSS नियम किसी भी <li> का बैकग्राउंड कलर पीला कर देगा जिसमें "highlight" क्लास वाला <span> हो।

उदाहरण 3: इनपुट वैलिडिटी के आधार पर फॉर्म लेबल की स्टाइलिंग

आप :has() का उपयोग किसी फॉर्म लेबल को स्टाइल करने के लिए कर सकते हैं, इस आधार पर कि उसका संबंधित इनपुट फ़ील्ड वैध है या अमान्य (:invalid सूडो-क्लास के साथ संयुक्त):

label:has(+ input:invalid) { color: red; font-weight: bold; }

यदि इसके ठीक बाद वाला इनपुट फ़ील्ड अमान्य है तो यह लेबल को लाल और बोल्ड बना देगा।

:has() सिलेक्टर के उन्नत उपयोग

जब :has() सिलेक्टर को अन्य CSS सिलेक्टर्स और सूडो-क्लासेस के साथ जोड़ा जाता है तो यह और भी शक्तिशाली हो जाता है। यहाँ कुछ उन्नत उपयोग के मामले दिए गए हैं:

उदाहरण 4: खाली एलिमेंट्स को टारगेट करना

आप उन एलिमेंट्स को टारगेट करने के लिए :not() सूडो-क्लास को :has() के साथ उपयोग कर सकते हैं जिनमें कोई विशिष्ट चाइल्ड *नहीं* है। उदाहरण के लिए, उन divs को स्टाइल करने के लिए जिनमें इमेज *नहीं* हैं:

div:not(:has(img)) { background-color: #f0f0f0; }

यह किसी भी <div> पर हल्का ग्रे बैकग्राउंड लागू करेगा जिसमें <img> एलिमेंट नहीं है।

उदाहरण 5: जटिल लेआउट बनाना

:has() सिलेक्टर का उपयोग किसी कंटेनर की सामग्री के आधार पर डायनामिक लेआउट बनाने के लिए किया जा सकता है। उदाहरण के लिए, आप ग्रिड सेल के भीतर एक विशिष्ट प्रकार के एलिमेंट की उपस्थिति के आधार पर ग्रिड का लेआउट बदल सकते हैं।

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-item:has(img) { grid-column: span 2; }

यह एक ग्रिड आइटम को दो कॉलम तक फैला देगा यदि उसमें कोई इमेज है।

उदाहरण 6: डायनामिक फॉर्म स्टाइलिंग

आप :has() का उपयोग फॉर्म एलिमेंट्स को उनकी स्थिति (जैसे, क्या वे फोकस्ड, भरे हुए, या वैध हैं) के आधार पर गतिशील रूप से स्टाइल करने के लिए कर सकते हैं।

.form-group:has(input:focus) { box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); } .form-group:has(input:valid) { border-color: green; } .form-group:has(input:invalid) { border-color: red; }

यह इनपुट के फोकस्ड होने पर एक नीला बॉक्स शैडो, इनपुट के वैध होने पर एक हरा बॉर्डर और इनपुट के अमान्य होने पर एक लाल बॉर्डर जोड़ देगा।

उदाहरण 7: चिल्ड्रेन की संख्या के आधार पर स्टाइलिंग

हालांकि :has() सीधे तौर पर चिल्ड्रेन की संख्या नहीं गिनता है, आप समान प्रभाव प्राप्त करने के लिए इसे अन्य सिलेक्टर्स और CSS प्रॉपर्टीज के साथ जोड़ सकते हैं। उदाहरण के लिए, आप किसी पेरेंट को स्टाइल करने के लिए :only-child का उपयोग कर सकते हैं यदि उसके पास केवल एक विशिष्ट प्रकार का चाइल्ड है।

div:has(> p:only-child) { background-color: lightgreen; }

यह एक <div> को हल्के हरे रंग के बैकग्राउंड के साथ तभी स्टाइल करेगा जब उसमें केवल एक <p> एलिमेंट उसके डायरेक्ट चाइल्ड के रूप में हो।

क्रॉस-ब्राउज़र संगतता और फॉलबैक

2023 के अंत तक, :has() सिलेक्टर को क्रोम, फ़ायरफ़ॉक्स, सफारी और एज सहित आधुनिक ब्राउज़रों में उत्कृष्ट समर्थन प्राप्त है। हालांकि, इसे प्रोडक्शन में तैनात करने से पहले Can I use पर संगतता की जांच करना महत्वपूर्ण है, खासकर यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है।

यहां संगतता संबंधी विचारों का एक विश्लेषण दिया गया है:

फॉलबैक प्रदान करना

यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है, तो आपको फॉलबैक प्रदान करने होंगे। यहाँ कुछ रणनीतियाँ हैं:

यहां फ़ीचर क्वेरी का उपयोग करने का एक उदाहरण दिया गया है:

.parent { /* सभी ब्राउज़रों के लिए बुनियादी स्टाइलिंग */ border: 1px solid black; } @supports selector(:has(img)) { .parent:has(img) { /* :has() का समर्थन करने वाले ब्राउज़रों के लिए उन्नत स्टाइलिंग */ border: 3px solid blue; } }

यह कोड सभी ब्राउज़रों में .parent एलिमेंट पर एक काला बॉर्डर लागू करेगा। उन ब्राउज़रों में जो :has() का समर्थन करते हैं, यदि .parent एलिमेंट में कोई इमेज है तो यह एक नीला बॉर्डर लागू करेगा।

परफॉर्मेंस संबंधी विचार

हालांकि :has() महत्वपूर्ण लाभ प्रदान करता है, लेकिन इसके संभावित प्रदर्शन प्रभाव पर विचार करना आवश्यक है, खासकर जब इसका व्यापक रूप से या जटिल सिलेक्टर्स के साथ उपयोग किया जाता है। ब्राउज़रों को पेज पर हर एलिमेंट के लिए सिलेक्टर का मूल्यांकन करने की आवश्यकता होती है, जो कम्प्यूटेशनल रूप से महंगा हो सकता है।

:has() के प्रदर्शन को अनुकूलित करने के लिए यहां कुछ सुझाव दिए गए हैं:

बचने योग्य सामान्य गलतियाँ

:has() सिलेक्टर के साथ काम करते समय, ऐसी गलतियाँ करना आसान है जो अप्रत्याशित परिणाम दे सकती हैं। यहाँ कुछ सामान्य नुकसानों से बचने के उपाय दिए गए हैं:

:has() का उपयोग करने के लिए सर्वोत्तम अभ्यास

:has() सिलेक्टर के लाभों को अधिकतम करने और संभावित समस्याओं से बचने के लिए, इन सर्वोत्तम प्रथाओं का पालन करें:

वास्तविक-दुनिया के उदाहरण और उपयोग के मामले

आइए कुछ वास्तविक-दुनिया के उदाहरण देखें कि कैसे :has() सिलेक्टर का उपयोग सामान्य डिज़ाइन चुनौतियों को हल करने के लिए किया जा सकता है।

उदाहरण 8: रिस्पॉन्सिव नेविगेशन मेनू बनाना

आप :has() का उपयोग करके रिस्पॉन्सिव नेविगेशन मेनू बना सकते हैं जो विशिष्ट मेनू आइटम्स की उपस्थिति के आधार पर विभिन्न स्क्रीन आकारों के अनुकूल होते हैं।

एक ऐसे परिदृश्य की कल्पना करें जहां आप उपयोगकर्ता के लॉग इन होने या न होने के आधार पर एक अलग नेविगेशन मेनू प्रदर्शित करना चाहते हैं। यदि वे लॉग इन हैं तो आप प्रोफ़ाइल और लॉगआउट एक्शन दिखा सकते हैं, यदि नहीं तो आप लॉगिन/रजिस्टर दिखा सकते हैं।

nav:has(.user-profile) { /* लॉग-इन उपयोगकर्ताओं के लिए स्टाइल */ } nav:not(:has(.user-profile)) { /* लॉग-आउट उपयोगकर्ताओं के लिए स्टाइल */ }

उदाहरण 9: कार्ड कंपोनेंट्स की स्टाइलिंग

:has() सिलेक्टर का उपयोग कार्ड कंपोनेंट्स को उनकी सामग्री के आधार पर स्टाइल करने के लिए किया जा सकता है। उदाहरण के लिए, आप किसी कार्ड में केवल तभी शैडो जोड़ सकते हैं जब उसमें कोई इमेज हो।

.card:has(img) { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

उदाहरण 10: डायनामिक थीम लागू करना

आप उपयोगकर्ता की प्राथमिकताओं या सिस्टम सेटिंग्स के आधार पर डायनामिक थीम लागू करने के लिए :has() का उपयोग कर सकते हैं। उदाहरण के लिए, आप पेज का बैकग्राउंड कलर इस आधार पर बदल सकते हैं कि उपयोगकर्ता ने डार्क मोड सक्षम किया है या नहीं।

body:has(.dark-mode) { background-color: #333; color: #fff; }

ये उदाहरण :has() सिलेक्टर की बहुमुखी प्रतिभा और डिजाइन चुनौतियों की एक विस्तृत श्रृंखला को हल करने की इसकी क्षमता को दर्शाते हैं।

CSS का भविष्य: आगे क्या है?

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

आगे देखते हुए, CSS वर्किंग ग्रुप अन्य रोमांचक सुविधाओं और संवर्द्धन की खोज कर रहा है जो CSS की क्षमताओं का और विस्तार करेंगे। इनमें शामिल हैं:

नवीनतम CSS विकास के साथ अप-टू-डेट रहकर और :has() जैसी नई सुविधाओं को अपनाकर, डेवलपर्स CSS की पूरी क्षमता को अनलॉक कर सकते हैं और वास्तव में असाधारण वेब अनुभव बना सकते हैं।

निष्कर्ष

:has() सिलेक्टर CSS टूलबॉक्स में एक शक्तिशाली সংযোজন है, जो पेरेंट सिलेक्शन को सक्षम करता है और डायनामिक और रिस्पॉन्सिव स्टाइलिंग के लिए नई संभावनाएं खोलता है। हालांकि ब्राउज़र संगतता और प्रदर्शन प्रभावों पर विचार करना महत्वपूर्ण है, क्लीनर, अधिक मेंटेनेबल और बेहतर परफॉर्मेंस वाले CSS कोड के लिए :has() का उपयोग करने के लाभ निर्विवाद हैं। इस गेम-चेंजिंग सिलेक्टर को अपनाएं और आज ही अपनी CSS स्टाइलिंग में क्रांति लाएं!

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