सीएसएस में अपने चिल्ड्रन के आधार पर, सीधे तौर पर पैरंट एलिमेंट चुनने की सुविधा मौजूद नहीं है. डेवलपर कई सालों से इसके लिए सबसे ज़्यादा अनुरोध कर रहे थे. :has()
चुनने वाला टूल, अब सभी मुख्य ब्राउज़र पर काम करता है. :has() से पहले, आप अक्सर लंबे सिलेक्टर की चेन बनाते थे या स्टाइल हुक के लिए क्लास जोड़ते थे. अब
किसी एलिमेंट के डिसेंडेंट के साथ, एलिमेंट के डिसेंडेंट के आधार पर उसे स्टाइल किया जा सकता है. ज़्यादा जानकारी के लिए
CSS Wrapped 2023 में
:has() सिलेक्टर के बारे में ज़्यादा जानें
और5 ऐसे सीएसएस स्निपेट जो हर फ़्रंटएंड डेवलपर को पता होने चाहिए.
हालांकि, यह सिलेक्टर छोटा लगता है, लेकिन बड़ी संख्या में इसका इस्तेमाल किया जा सकता है.
इस लेख में, इस्तेमाल के कुछ ऐसे उदाहरण दिखाए गए हैं जिन्हें ई-कॉमर्स कंपनियों ने :has() सिलेक्टर का इस्तेमाल करके अनलॉक किया है.
:has(), Baseline Newly उपलब्ध का हिस्सा है.
उस पूरी सीरीज़ के बारे में पढ़ें जिसका यह लेख है. इसमें इस बात की जानकारी दी गई है कि ई-कॉमर्स कंपनियों ने नई सीएसएस और यूज़र इंटरफ़ेस (यूआई) की सुविधाओं का इस्तेमाल करके, अपनी वेबसाइट को कैसे बेहतर बनाया है.
नीति बाज़ार
:has()सिलेक्टर की मदद से, उपयोगकर्ता के चुने गए टेक्स्ट की JavaScript पर आधारित पुष्टि को हटा दिया गया. साथ ही, उसकी जगह सीएसएस का इस्तेमाल किया गया. यह सेवा हमारे लिए पहले की तरह ही काम कर रही है.—अमन सोनी, टेक लीड, Policybazaar
पॉलिसी बाज़ार की निवेश टीम ने बड़ी समझदारी से :has() सिलेक्टर को लागू किया है, ताकि प्लान की तुलना करने वाले उपयोगकर्ताओं को साफ़ तौर पर संकेत मिल सकें. नीचे दी गई इमेज में कंपैरिज़न यूज़र इंटरफ़ेस (यूआई) में दो तरह के प्लान दिखाए गए हैं (पीला और नीला). हर प्लान की तुलना सिर्फ़ उसके टाइप से की जा सकती है. :has() का इस्तेमाल करने पर, जब कोई उपयोगकर्ता एक तरह का प्लान चुनता है, तो दूसरे प्लान को नहीं चुना जा सकता.
:has() को लागू करना.कोड
:has() से आपको स्टाइल वाले पैरंट एलिमेंट और उनके बच्चों का ऐक्सेस मिलता है. यहां दिया गया कोड यह जांच करता है कि पैरंट कंटेनर में .disabled-group क्लास सेट है या नहीं.
अगर ऐसा होता है, तो कार्ड धूसर कर दिया जाता है और "जोड़ें" बटन को क्लिक पर प्रतिक्रिया देने से रोका जाता है. इसके लिए, pointer-events को none पर सेट किया जाता है.
.plan-group-container:has(.disabled-group) {
opacity: 0.5;
filter: grayscale(100%);
}
.plan-group-container:has(.disabled-section) .button {
pointer-events: none;
border-color: #B5B5B5;
color: var(--text-primary-38-color);
background: var(--input-border-color);
}
Policybazaar की स्वास्थ्य टीम ने
इस्तेमाल के मामले को कुछ अलग तरीके से लागू किया. इनमें उपयोगकर्ता के लिए इनलाइन क्विज़ होता है. साथ ही, :has() का इस्तेमाल करके, सवाल के चेकबॉक्स का स्टेटस देखा जा सकता है और देखा जा सकता है कि सवाल का जवाब दिया गया है या नहीं. अगर ऐसा होता है, तो अगले सवाल पर ले जाने के लिए ऐनिमेशन लागू किया जाता है.
कोड
प्लान की तुलना करने वाले उदाहरण में, :has() का इस्तेमाल किसी क्लास की मौजूदगी का पता लगाने के लिए किया गया था. :has(input:checked) का इस्तेमाल करके, चेकबॉक्स जैसे किसी इनपुट एलिमेंट की स्थिति भी देखी जा सकती है. क्विज़ के विज़ुअल में, बैंगनी बैनर में
हर सवाल पर एक चेकबॉक्स है. नीति बाज़ार यह जांच करता है कि
सवाल का जवाब :has(input:checked) की मदद से दिया गया है या नहीं. अगर सवाल का जवाब दिया गया है, तो
अगले सवाल पर जाने के लिए
animation: quesSlideOut 0.3s 0.3s linear forwards का इस्तेमाल करके ऐनिमेशन ट्रिगर करता है. नीचे दिए गए कोड में देखें कि यह कैसे काम करता है.
.segment_banner__wrap__questions {
position: relative;
animation: quesSlideIn 0.3s linear forwards;
}
.segment_banner__wrap__questions:has(input:checked) {
animation: quesSlideOut 0.3s 0.3s linear forwards;
}
@keyframes quesSlideIn {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes quesSlideOut {
from {
transform: translateX(0px);
opacity: 1;
}
to {
transform: translateX(-50px);
opacity: 0;
}
}
टोकोपीडिया
अगर प्रॉडक्ट के थंबनेल में वीडियो मौजूद है, तो ओवरले इमेज बनाने के लिए Tokopedia ने :has() का इस्तेमाल किया है. अगर प्रॉडक्ट के थंबनेल में .playIcon क्लास है, तो एक सीएसएस ओवरले जोड़ा जाता है. यहां :has() सिलेक्टर का इस्तेमाल, .thumbnailWrapper क्लास में मौजूद & नेस्टिंग सिलेक्टर के साथ किया जाता है.
यह क्लास सभी थंबनेल पर लागू होती है. यह ज़्यादा मॉड्यूलर और पढ़ने लायक सीएसएस बनाता है.
:has() का इस्तेमाल करने से पहले और बाद में.कोड
इस कोड में, थंबनेल को स्टाइल देने के लिए सीएसएस सिलेक्टर और कॉम्बिनेशन (& और >) का इस्तेमाल किया गया है और :has() के साथ नेस्टिंग की गई है.
काम न करने वाले ब्राउज़र के लिए, सामान्य अतिरिक्त सीएसएस क्लास नियम का इस्तेमाल फ़ॉलबैक के तौर पर किया जाता है. ब्राउज़र से जुड़ी सहायता की जांच करने के लिए भी @supports selector(:has(*)) नियम का इस्तेमाल किया जाता है.
इस वजह से, सभी ब्राउज़र वर्शन पर एक जैसा अनुभव मिलता है.
export const thumbnailWrapper = css`
padding: 0;
margin-right: 7px;
border: none;
outline: none;
background: transparent;
> div {
width: 64px;
height: 64px;
overflow: hidden;
cursor: pointer;
border-color: ;
position: relative;
border: 2px solid ${NN0};
border-radius: 8px;
transition: border-color 0.25s;
&.active {
border-color: ${GN500};
}
@supports selector(:has(*)) {
&:has(.playIcon) {
&::after {
content: '';
display: block;
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
& > .playIcon {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
text-align: center;
z-index: 1;
}
}
`;
:has() का इस्तेमाल करते समय इन बातों का ध्यान रखें
ज़्यादा जटिल स्थिति बनाने के लिए, :has() को अन्य सिलेक्टर के साथ जोड़ें. परिवार सिलेक्टर में दिए गए कुछ उदाहरण देखें.
संसाधन:
- सीएसएस रैप्ड 2023
- :has(): फ़ैमिली सिलेक्टर
- डेमो :has()
- क्या आपको किसी गड़बड़ी की शिकायत करनी है या नई सुविधा के लिए अनुरोध करना है? हम आपकी राय जानना चाहते हैं!
इस सीरीज़ के अन्य लेखों को पढ़ें. इनमें बताया गया है कि ई-कॉमर्स कंपनियों को स्क्रोल करके चलने वाले ऐनिमेशन, व्यू ट्रांज़िशन, पॉपओवर, और कंटेनर क्वेरी जैसी नई सीएसएस और यूज़र इंटरफ़ेस (यूआई) सुविधाओं का इस्तेमाल करने से किस तरह फ़ायदा मिला.