:has एक क्षमाशील चयनकर्ता है

:has एक क्षमाशील चयनकर्ता है

:has एक अक्षम्य चयनकर्ता प्लेटोब्लॉकचेन डेटा इंटेलिजेंस है। लंबवत खोज. ऐ.

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

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

देख ::scoobydoo वहाँ पर? यह बिल्कुल अमान्य है। एक क्षमाशील चयनकर्ता सूची उस फर्जी चयनकर्ता की उपेक्षा करती है और बाकी वस्तुओं का मूल्यांकन करने के लिए आगे बढ़ती है जैसे कि यह इस तरह लिखा गया हो:

article:has(h2, ul) { }

:has() वास्तव में एक क्षमाशील चयनकर्ता थे 7 मई, 2022 के पिछले मसौदे में. लेकिन वह बदल गया समस्या की सूचना मिलने के बाद जब क्षमाशील प्रकृति jQuery के साथ संघर्ष करती है :has() एक जटिल चयनकर्ता शामिल है (उदाहरण के लिए header h2 + p). W3C एक संकल्प पर उतरा बनाना :has() एक "अक्षम्य" चयनकर्ता अभी कुछ हफ्ते पहले।

तो, हमारा पिछला उदाहरण? पूरी चयनकर्ता सूची अमान्य है क्योंकि फर्जी चयनकर्ता अमान्य है। लेकिन अन्य दो क्षमाशील चयनकर्ता, :is() और :where(), अपरिवर्तित छोड़ दिया गया है।

इसके लिए थोड़ा उपाय है। याद है, :is() और :where()क्षमा कर रहे हैं, भले ही :has() क्या नहीं है। इसका मतलब है कि हम इनमें से किसी भी चयनकर्ता को नेस्ट कर सकते हैं :has() अधिक क्षमाशील व्यवहार पाने के लिए:

article:has(:where(h2, ul, ::-scoobydoo)) { }

आप किसका उपयोग करते हैं, यह महत्वपूर्ण हो सकता है क्योंकि इसकी विशिष्टता :is() इसकी सूची में सबसे विशिष्ट आइटम द्वारा निर्धारित किया जाता है। इसलिए, यदि आपको कुछ कम विशिष्ट की आवश्यकता है तो आप बेहतर तरीके से पहुंचेंगे :where() चूंकि यह विशिष्टता स्कोर में नहीं जोड़ता है।

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

नवीनतम जानकारी को दर्शाने के लिए हमने अपनी कुछ पोस्ट अपडेट की हैं। मैं जंगली में बहुत से अन्य लोगों को देख रहा हूं जिन्हें अद्यतन करने की आवश्यकता है, इसलिए किसी के लिए भी थोड़ा सा पीएसए जिसे ऐसा करने की आवश्यकता है।

समय टिकट:

से अधिक सीएसएस ट्रिक्स