CSS :has() सिलेक्टरमध्ये प्राविण्य: पॅरेंट सिलेक्शनची शक्ती उघड करणे

वर्षानुवर्षे, CSS डेव्हलपर्स त्यांच्या मुलांवर आधारित पॅरेंट एलिमेंट्स निवडण्यासाठी एका सोप्या आणि प्रभावी मार्गाची आतुरतेने वाट पाहत होते. आता प्रतीक्षा संपली आहे! :has() स्युडो-क्लास अखेर आला आहे, आणि तो आपण CSS कसे लिहितो यात क्रांती घडवत आहे. हा शक्तिशाली सिलेक्टर तुम्हाला पॅरेंट एलिमेंटला लक्ष्य करण्याची परवानगी देतो, जर त्यात विशिष्ट चाइल्ड एलिमेंट असेल, ज्यामुळे डायनॅमिक आणि रिस्पॉन्सिव्ह स्टायलिंगसाठी शक्यतांचे जग खुले होते.

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

:has() स्युडो-क्लास हा एक CSS रिलेशनल स्युडो-क्लास आहे जो वितर्क म्हणून सिलेक्टर सूची स्वीकारतो. तो एक एलिमेंट निवडतो, जर सिलेक्टर सूचीमधील कोणताही सिलेक्टर एलिमेंटच्या वंशजांपैकी किमान एका एलिमेंटशी जुळत असेल. सोप्या भाषेत, तो तपासतो की पॅरेंट एलिमेंटमध्ये has (आहे) विशिष्ट चाइल्ड आहे का, आणि जर असेल, तर पॅरेंट निवडला जातो.

मूलभूत सिंटॅक्स आहे:

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

हे parent एलिमेंट तेव्हाच निवडते जेव्हा त्यात किमान एक child एलिमेंट असेल.

:has() इतके महत्त्वाचे का आहे?

पारंपारिकपणे, CSS आपल्या मुलांवर आधारित पॅरेंट एलिमेंट्स निवडण्याच्या क्षमतेमध्ये मर्यादित होते. या मर्यादेमुळे डायनॅमिक स्टायलिंग साध्य करण्यासाठी अनेकदा क्लिष्ट JavaScript सोल्यूशन्स किंवा वर्कअराउंड्सची आवश्यकता भासत असे. :has() सिलेक्टर या अवजड पद्धतींची गरज दूर करतो, ज्यामुळे अधिक स्वच्छ, देखभालीसाठी सोपा आणि कार्यक्षम CSS कोड लिहिता येतो.

:has() एक गेम-चेंजर का आहे ते येथे दिले आहे:

सोपे स्टायलिंग: पूर्वी JavaScript ची आवश्यकता असणारे क्लिष्ट स्टायलिंग नियम आता शुद्ध CSS सह साध्य केले जाऊ शकतात.
सुधारित देखभालक्षमता: स्वच्छ आणि संक्षिप्त CSS कोड समजून घेणे, डीबग करणे आणि देखरेख करणे सोपे आहे.
वर्धित कार्यक्षमता: JavaScript-आधारित सोल्यूशन्सच्या तुलनेत नेटिव्ह CSS सिलेक्टर्स वापरल्याने साधारणपणे चांगली कार्यक्षमता मिळते.
अधिक लवचिकता: :has() सिलेक्टर डायनॅमिक आणि रिस्पॉन्सिव्ह डिझाइन तयार करण्यात अधिक लवचिकता प्रदान करतो.

:has() सिलेक्टरची मूलभूत उदाहरणे

:has() सिलेक्टरची शक्ती स्पष्ट करण्यासाठी काही सोप्या उदाहरणांसह सुरुवात करूया.

उदाहरण १: प्रतिमेच्या उपस्थितीवर आधारित पॅरेंट Div ला स्टाईल करणे

समजा तुम्हाला <div> एलिमेंटला केवळ तेव्हाच बॉर्डर जोडायची आहे जेव्हा त्यात <img> एलिमेंट असेल:

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

हा CSS नियम कोणत्याही <div> ला निळी बॉर्डर लावेल ज्यात किमान एक <img> एलिमेंट असेल.

उदाहरण २: स्पॅनच्या उपस्थितीवर आधारित लिस्ट आयटमला स्टाईल करणे

समजा तुमच्याकडे आयटमची एक यादी आहे, आणि तुम्हाला लिस्ट आयटम हायलाइट करायचा आहे जर त्यात विशिष्ट क्लाससह <span> एलिमेंट असेल:

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

हा CSS नियम कोणत्याही <li> चा बॅकग्राउंड रंग पिवळा करेल ज्यात "highlight" क्लाससह <span> असेल.

उदाहरण ३: इनपुट व्हॅलिडिटीवर आधारित फॉर्म लेबलला स्टाईल करणे

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

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

हे लेबलला लाल आणि ठळक करेल जर त्याच्या लगेच नंतरचे इनपुट फील्ड अवैध असेल.

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

जेव्हा :has() सिलेक्टर इतर CSS सिलेक्टर्स आणि स्युडो-क्लाससह एकत्र केला जातो तेव्हा तो आणखी शक्तिशाली बनतो. येथे काही प्रगत उपयोग प्रकरणे आहेत:

उदाहरण ४: रिकाम्या एलिमेंट्सना लक्ष्य करणे

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

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

हे कोणत्याही <div> ला हलका राखाडी बॅकग्राउंड लावेल ज्यात <img> एलिमेंट नाही.

उदाहरण ५: क्लिष्ट लेआउट्स तयार करणे

:has() सिलेक्टरचा वापर कंटेनरच्या सामग्रीवर आधारित डायनॅमिक लेआउट तयार करण्यासाठी केला जाऊ शकतो. उदाहरणार्थ, तुम्ही ग्रिड सेलमध्ये विशिष्ट प्रकारच्या एलिमेंटच्या उपस्थितीवर आधारित ग्रिडचा लेआउट बदलू शकता.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item:has(img) {
  grid-column: span 2;
}

हे ग्रिड आयटमला दोन कॉलममध्ये पसरेल जर त्यात प्रतिमा असेल.

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

तुम्ही :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;
}

जेव्हा इनपुट फोकस्ड असेल तेव्हा निळी बॉक्स शॅडो जोडेल, इनपुट वैध असल्यास हिरवी बॉर्डर आणि इनपुट अवैध असल्यास लाल बॉर्डर जोडेल.

उदाहरण ७: मुलांच्या संख्येवर आधारित स्टायलिंग

जरी :has() थेट मुलांची संख्या मोजत नसला तरी, तुम्ही समान परिणाम साध्य करण्यासाठी ते इतर सिलेक्टर्स आणि CSS प्रॉपर्टीजसह एकत्र करू शकता. उदाहरणार्थ, तुम्ही :only-child चा वापर करून पॅरेंटला स्टाईल करू शकता जर त्यात विशिष्ट प्रकारचा फक्त एकच चाइल्ड असेल.

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

हे <div> ला हलका हिरवा बॅकग्राउंड देईल केवळ तेव्हाच जेव्हा त्यात थेट चाइल्ड म्हणून एकच <p> एलिमेंट असेल.

क्रॉस-ब्राउझर सुसंगतता आणि फॉलबॅक्स

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

येथे सुसंगतता विचारांचे विघटन आहे:

आधुनिक ब्राउझर्स: क्रोम, फायरफॉक्स, सफारी आणि एजच्या नवीनतम आवृत्त्यांमध्ये उत्कृष्ट समर्थन.
जुने ब्राउझर्स: जुन्या ब्राउझर्समध्ये (उदा. इंटरनेट एक्सप्लोरर) कोणतेही समर्थन नाही.

फॉलबॅक्स प्रदान करणे

जर तुम्हाला जुन्या ब्राउझर्सना समर्थन देण्याची आवश्यकता असेल, तर तुम्हाला फॉलबॅक्स प्रदान करावे लागतील. येथे काही धोरणे आहेत:

JavaScript: :has() साठी ब्राउझरचे समर्थन शोधण्यासाठी JavaScript वापरा आणि आवश्यक असल्यास पर्यायी स्टायलिंग लावा.
फीचर क्वेरीज: ब्राउझर समर्थनावर आधारित भिन्न स्टाईल प्रदान करण्यासाठी CSS फीचर क्वेरीज (@supports) वापरा.
प्रोग्रेसिव्ह एनहान्समेंट: सर्व ब्राउझर्समध्ये काम करणाऱ्या मूलभूत, कार्यात्मक डिझाइनसह प्रारंभ करा आणि नंतर :has() ला समर्थन देणाऱ्या ब्राउझर्ससाठी डिझाइनला प्रगतीशीलपणे वर्धित करा.

येथे फीचर क्वेरी वापरण्याचे एक उदाहरण आहे:

.parent {
  /* सर्व ब्राउझर्ससाठी मूलभूत स्टायलिंग */
  border: 1px solid black;
}

@supports selector(:has(img)) {
  .parent:has(img) {
    /* :has() ला समर्थन देणाऱ्या ब्राउझर्ससाठी वर्धित स्टायलिंग */
    border: 3px solid blue;
  }
}

हा कोड सर्व ब्राउझर्समध्ये .parent एलिमेंटला काळी बॉर्डर लावेल. :has() ला समर्थन देणाऱ्या ब्राउझर्समध्ये, जर .parent एलिमेंटमध्ये प्रतिमा असेल तर तो निळी बॉर्डर लावेल.

कार्यक्षमता विचार

जरी :has() महत्त्वपूर्ण फायदे देत असला तरी, त्याच्या कार्यक्षमतेवरील संभाव्य परिणामाचा विचार करणे आवश्यक आहे, विशेषतः जेव्हा त्याचा व्यापकपणे किंवा क्लिष्ट सिलेक्टर्ससह वापर केला जातो. ब्राउझर्सना पृष्ठावरील प्रत्येक एलिमेंटसाठी सिलेक्टरचे मूल्यांकन करणे आवश्यक असते, जे संगणकीयदृष्ट्या महाग होऊ शकते.

:has() ची कार्यक्षमता ऑप्टिमाइझ करण्यासाठी येथे काही टिप्स आहेत:

सिलेक्टर्स सोपे ठेवा: :has() स्युडो-क्लासमध्ये जास्त क्लिष्ट सिलेक्टर्स वापरणे टाळा.
व्याप्ती मर्यादित करा: :has() जागतिक स्तरावर लागू करण्याऐवजी विशिष्ट एलिमेंट्स किंवा कंटेनर्सवर लागू करा.
कार्यक्षमतेची चाचणी घ्या: आपल्या CSS नियमांच्या कार्यक्षमतेचे निरीक्षण करण्यासाठी आणि संभाव्य अडथळे ओळखण्यासाठी ब्राउझर डेव्हलपर टूल्स वापरा.

टाळण्यासारख्या सामान्य चुका

:has() सिलेक्टरसह काम करताना, चुका करणे सोपे आहे ज्यामुळे अनपेक्षित परिणाम होऊ शकतात. येथे टाळण्यासारखे काही सामान्य धोके आहेत:

विशिष्टतेच्या समस्या: आपल्या :has() नियमांमध्ये इतर CSS नियमांना ओव्हरराइड करण्यासाठी पुरेशी विशिष्टता असल्याची खात्री करा. नेहमीप्रमाणेच विशिष्टता समस्यानिवारण चरणांचा वापर करा.
चुकीचे नेस्टिंग: :has() सिलेक्टर योग्य पॅरेंट एलिमेंटला लक्ष्य करत असल्याची खात्री करण्यासाठी आपल्या एलिमेंट्सचे नेस्टिंग पुन्हा तपासा.
अति क्लिष्ट सिलेक्टर्स: :has() स्युडो-क्लासमध्ये जास्त क्लिष्ट सिलेक्टर्स वापरणे टाळा, कारण याचा कार्यक्षमतेवर परिणाम होऊ शकतो.
तात्काळ चाइल्ड्स गृहित धरणे: लक्षात ठेवा की :has() केवळ तात्काळ चाइल्ड्ससाठी नव्हे, तर *कोणत्याही* वंशजासाठी तपासतो. जर तुम्हाला फक्त तात्काळ चाइल्ड्सना लक्ष्य करायचे असेल तर डायरेक्ट चाइल्ड कॉम्बिनेटर (>) वापरा (उदा. div:has(> img)).

:has() वापरण्यासाठी सर्वोत्तम पद्धती

:has() सिलेक्टरचे फायदे जास्तीत जास्त मिळवण्यासाठी आणि संभाव्य समस्या टाळण्यासाठी, या सर्वोत्तम पद्धतींचे अनुसरण करा:

त्याचा विवेकाने वापर करा: :has() चा वापर तेव्हाच करा जेव्हा ते इतर CSS तंत्रे किंवा JavaScript सोल्यूशन्सपेक्षा स्पष्ट फायदा देत असेल.
ते सोपे ठेवा: क्लिष्ट, गुंतागुंतीच्या सिलेक्टर्सपेक्षा सोप्या, वाचनीय सिलेक्टर्सना प्राधान्य द्या.
पूर्णपणे चाचणी घ्या: आपले CSS नियम अपेक्षेप्रमाणे काम करत असल्याची खात्री करण्यासाठी भिन्न ब्राउझर्स आणि डिव्हाइसेसमध्ये त्यांची चाचणी घ्या.
आपला कोड दस्तऐवजीकरण करा: आपल्या :has() नियमांचा उद्देश आणि कार्यक्षमता स्पष्ट करण्यासाठी आपल्या CSS कोडमध्ये टिप्पण्या जोडा.
ॲक्सेसिबिलिटीचा विचार करा: तुमचा :has() चा वापर ॲक्सेसिबिलिटीवर नकारात्मक परिणाम करत नाही याची खात्री करा. उदाहरणार्थ, महत्त्वाची माहिती देण्यासाठी केवळ :has() द्वारे ट्रिगर झालेल्या स्टायलिंग बदलांवर अवलंबून राहू नका; अपंग वापरकर्त्यांसाठी ARIA ॲट्रिब्यूट्स किंवा पर्यायी यंत्रणा वापरा.

वास्तविक-जगातील उदाहरणे आणि उपयोग प्रकरणे

चला काही वास्तविक-जगातील उदाहरणे पाहूया की सामान्य डिझाइन आव्हाने सोडवण्यासाठी :has() सिलेक्टर कसा वापरला जाऊ शकतो.

उदाहरण ८: रिस्पॉन्सिव्ह नेव्हिगेशन मेनू तयार करणे

तुम्ही :has() चा वापर करून रिस्पॉन्सिव्ह नेव्हिगेशन मेनू तयार करू शकता जे विशिष्ट मेनू आयटमच्या उपस्थितीवर आधारित भिन्न स्क्रीन आकारांशी जुळवून घेतात.

अशा परिस्थितीची कल्पना करा जिथे तुम्हाला वापरकर्ता लॉग इन आहे की नाही यावर अवलंबून एक वेगळा नेव्हिगेशन मेनू प्रदर्शित करायचा आहे. जर ते लॉग इन असतील तर तुम्ही प्रोफाइल आणि लॉगआउट क्रिया दर्शवू शकता, अन्यथा तुम्ही लॉगिन/नोंदणी दर्शवू शकता.

nav:has(.user-profile) {
  /* लॉग-इन वापरकर्त्यांसाठी स्टाईल्स */
}

nav:not(:has(.user-profile)) {
  /* लॉग-आउट वापरकर्त्यांसाठी स्टाईल्स */
}

उदाहरण ९: कार्ड कंपोनंट्सना स्टाईल करणे

:has() सिलेक्टरचा वापर कार्ड कंपोनंट्सना त्यांच्या सामग्रीवर आधारित स्टाईल करण्यासाठी केला जाऊ शकतो. उदाहरणार्थ, तुम्ही कार्डला केवळ तेव्हाच शॅडो जोडू शकता जेव्हा त्यात प्रतिमा असेल.

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

उदाहरण १०: डायनॅमिक थीम्स लागू करणे

तुम्ही :has() चा वापर वापरकर्त्याच्या प्राधान्यांनुसार किंवा सिस्टम सेटिंग्जवर आधारित डायनॅमिक थीम्स लागू करण्यासाठी करू शकता. उदाहरणार्थ, वापरकर्त्याने डार्क मोड सक्षम केला आहे की नाही यावर आधारित तुम्ही पृष्ठाचा बॅकग्राउंड रंग बदलू शकता.

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

ही उदाहरणे :has() सिलेक्टरची अष्टपैलुत्व आणि विविध डिझाइन आव्हाने सोडवण्याची त्याची क्षमता दर्शवतात.

CSS चे भविष्य: पुढे काय?

:has() सिलेक्टरचा परिचय CSS च्या उत्क्रांतीमधील एक महत्त्वपूर्ण पाऊल आहे. हे डेव्हलपर्सना JavaScript वर कमी अवलंबून राहून अधिक डायनॅमिक, रिस्पॉन्सिव्ह आणि देखभालीसाठी सोपे स्टाइलशीट तयार करण्यास सक्षम करते. जसे :has() साठी ब्राउझर समर्थन वाढत जाईल, तसे आपण या शक्तिशाली सिलेक्टरचे आणखी नाविन्यपूर्ण आणि सर्जनशील उपयोग पाहू शकतो.

पुढे पाहता, CSS वर्किंग ग्रुप इतर रोमांचक वैशिष्ट्ये आणि सुधारणांचा शोध घेत आहे जे CSS च्या क्षमतांचा आणखी विस्तार करतील. यात समाविष्ट आहे:

कंटेनर क्वेरीज: कंपोनंट्सना व्ह्यूपोर्टऐवजी त्यांच्या कंटेनरच्या आकारावर आधारित त्यांचे स्टायलिंग जुळवून घेण्याची परवानगी देणे.
कॅस्केड लेयर्स: CSS नियमांच्या कॅस्केड आणि विशिष्टतेवर अधिक नियंत्रण प्रदान करणे.
अधिक प्रगत सिलेक्टर्स: नवीन सिलेक्टर्स सादर करणे जे एलिमेंट्सना त्यांच्या ॲट्रिब्यूट्स, सामग्री आणि दस्तऐवज ट्रीमधील स्थानावर आधारित लक्ष्य करू शकतात.

नवीनतम CSS घडामोडींसह अद्ययावत राहून आणि :has() सारख्या नवीन वैशिष्ट्यांना स्वीकारून, डेव्हलपर्स CSS ची पूर्ण क्षमता अनलॉक करू शकतात आणि खरोखरच अपवादात्मक वेब अनुभव तयार करू शकतात.

निष्कर्ष

:has() सिलेक्टर CSS टूलबॉक्समध्ये एक शक्तिशाली भर आहे, जो पॅरेंट सिलेक्शन सक्षम करतो आणि डायनॅमिक आणि रिस्पॉन्सिव्ह स्टायलिंगसाठी नवीन शक्यता उघडतो. जरी ब्राउझर सुसंगतता आणि कार्यक्षमता परिणामांचा विचार करणे महत्त्वाचे असले तरी, स्वच्छ, अधिक देखभालीसाठी सोपा आणि कार्यक्षम CSS कोडसाठी :has() वापरण्याचे फायदे निर्विवाद आहेत. या गेम-चेंजिंग सिलेक्टरला स्वीकारा आणि आजच तुमच्या CSS स्टायलिंगमध्ये क्रांती घडवा!

ॲक्सेसिबिलिटीचा विचार करणे आणि जुन्या ब्राउझर्ससाठी फॉलबॅक यंत्रणा प्रदान करणे लक्षात ठेवा. या मार्गदर्शकामध्ये नमूद केलेल्या सर्वोत्तम पद्धतींचे अनुसरण करून, तुम्ही :has() सिलेक्टरची पूर्ण क्षमता वापरू शकता आणि जगभरातील वापरकर्त्यांसाठी खरोखरच अपवादात्मक वेब अनुभव तयार करू शकता.