सीएसएस में, चाइल्ड एलिमेंट के आधार पर पैरंट एलिमेंट को सीधे तौर पर चुनने का कोई तरीका नहीं था. डेवलपर कई सालों से इसकी मांग कर रहे थे. अब सभी अहम ब्राउज़र, :has() सिलेक्टर के साथ काम करते हैं. इससे यह समस्या हल हो गई है. :has() से पहले, आपको स्टाइलिंग हुक के लिए, अक्सर लंबे सिलेक्टर की चेन बनानी पड़ती थी या क्लास जोड़नी पड़ती थीं. अब किसी एलिमेंट के डिसेंडेंट के साथ उसके संबंध के आधार पर स्टाइलिंग की जा सकती है. सीएसएस रैप्ड 2023 और ऐसे पांच सीएसएस स्निपेट जिनके बारे में हर फ़्रंट-एंड डेवलपर को पता होना चाहिए में, :has() सिलेक्टर के बारे में ज़्यादा जानें.
हालांकि, यह सिलेक्टर छोटा दिखता है, लेकिन इससे इस्तेमाल के कई उदाहरण तैयार किए जा सकते हैं.
इस लेख में, इस्तेमाल के कुछ ऐसे उदाहरण दिए गए हैं जिन्हें ई-कॉमर्स कंपनियों ने :has() सिलेक्टर की मदद से तैयार किया है.
इस लेख की पूरी सीरीज़ देखें. इसमें बताया गया है कि ई-कॉमर्स कंपनियों ने नए सीएसएस और यूज़र इंटरफ़ेस (यूआई) की सुविधाओं का इस्तेमाल करके, अपनी वेबसाइट को कैसे बेहतर बनाया.
Policybazaar
:has()सिलेक्टर की मदद से, हम उपयोगकर्ता के चुने गए विकल्प की पुष्टि करने के लिए, JavaScript पर आधारित तरीके को हटा पाए. साथ ही, हमने इसकी जगह सीएसएस का इस्तेमाल किया. यह हमारे लिए पहले की तरह ही काम कर रहा है.—अमन सोनी, टेक लीड, Policybazaar
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) का इस्तेमाल करके, इनपुट एलिमेंट की स्थिति की भी जांच की जा सकती है. जैसे, चेकबॉक्स. क्विज़ दिखाने वाली इमेज में, बैंगनी रंग के बैनर में मौजूद हर सवाल एक चेकबॉक्स है. Policybazaar, :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
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()
- क्या आपको किसी गड़बड़ी की शिकायत करनी है या किसी नई सुविधा के लिए अनुरोध करना है? हमें आपकी राय का इंतज़ार है!
इस सीरीज़ के अन्य लेख पढ़ें. इनमें बताया गया है कि ई-कॉमर्स कंपनियों को, सीएसएस और यूज़र इंटरफ़ेस (यूआई) की नई सुविधाओं का इस्तेमाल करने से कैसे फ़ायदा मिला. जैसे, स्क्रोल-ड्राइव ऐनिमेशन, व्यू ट्रांज़िशन, पॉप-ओवर, और कंटेनर क्वेरी.