:not() :is() और :where()
:not() से elements को बाहर कीजिए, :is() से सूची में से किसी से मिलान कीजिए और कम specificity के लिए :where() का उपयोग कीजिए।
:not() :is() और :where(), CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
:not() छद्म-क्लास
:not(selector) उन तत्वों का चयन करता है, जो दिए गए चयनकर्ता से मेल नहीं खाते। यह चयन को उलट देता है।
<input type="text" placeholder="Text input (styled)" />
<input type="submit" value="Submit (unstyled)" />
:not() में कई आर्ग्युमेंट
आधुनिक CSS में :not() के अंदर कई आर्ग्युमेंट दिए जा सकते हैं—यह उन तत्वों से मेल खाता है, जो सूची में दिए गए किसी भी चयनकर्ता से मेल नहीं खाते:
<a href="#">Normal link</a> <a href="#" class="active">Active link</a> <a href="#" class="disabled">Disabled link</a>
:not() की विशिष्टता
:not() की विशिष्टता उसके सबसे अधिक विशिष्ट आर्ग्युमेंट की विशिष्टता के बराबर होती है। :not(.active) में क्लास-स्तर की विशिष्टता (0,1,0) होती है।
:is() छद्म-क्लास
:is() उन सभी तत्वों से मेल खाता है, जो सूची में दिए गए किसी भी चयनकर्ता से मेल खाते हैं। यह समूह बनाना आसान करता है और दोहराव कम करता है।
<header><h1>Site Title</h1><h2>Subtitle</h2><h3>Tagline</h3></header>
:is() की विशिष्टता
:is() अपने सबसे अधिक विशिष्ट आर्ग्युमेंट की विशिष्टता अपनाता है। यदि सूची में कोई ID चयनकर्ता हो, तो पूरे नियम में ID-स्तर की विशिष्टता होती है।
<div id="header"><h2>Header H2 (crimson via ID)</h2></div>
<div class="card"><h2>Card H2 (crimson via class)</h2></div>
:is() का त्रुटि-सहिष्णु विश्लेषण
:is() त्रुटि-सहिष्णु चयनकर्ता विश्लेषण का उपयोग करता है: यदि सूची में कोई चयनकर्ता अमान्य हो, तो उसे चुपचाप अनदेखा कर दिया जाता है और बाकी चयनकर्ता लागू होते रहते हैं। नियमित अल्पविराम-विभाजित चयनकर्ता पूरी तरह विफल हो जाते हैं, यदि उनमें से कोई एक अमान्य हो।
:where() छद्म-क्लास
:where() बिल्कुल :is() की तरह काम करता है, लेकिन इसकी विशिष्टता शून्य होती है। इसे यूटिलिटी क्लास और रीसेट शैलियों के लिए बनाया गया है, जिन्हें आसानी से ओवरराइड किया जा सके।
<h1>No top margin</h1><h2>No top margin</h2><h3>No top margin</h3>
रीसेट के लिए :where()
:where() CSS रीसेट और आधार शैलियों के लिए आदर्श है, जिन्हें विशिष्टता की प्रतिस्पर्धा में कभी जीतना नहीं चाहिए:
<ul><li>Item A</li><li>Item B</li></ul>
<ol><li>Step 1</li><li>Step 2</li></ol>
विशिष्टता की तुलना
विशिष्टता के व्यवहार का सारांश:
:is()— आर्ग्युमेंटों में सबसे अधिक विशिष्टता:where()— हमेशा शून्य विशिष्टता:not()— आर्ग्युमेंटों में सबसे अधिक विशिष्टता
:is() और :not() को जोड़ना
सटीक और पढ़ने में आसान चयनकर्ता बनाने के लिए इन्हें मिलाएँ:
<nav class="nav"><a href="#">Link</a> <button>Button</button> <a href="#" class="disabled">Disabled Link</a></nav>
ब्राउज़र समर्थन
:is() और :where() सभी आधुनिक ब्राउज़र में समर्थित हैं। कई आर्ग्युमेंट वाला :not() आधुनिक ब्राउज़र में समर्थित है। IE11 समर्थन आवश्यक वाले प्रोजेक्ट में इनसे बचें।
त्वरित जाँच
किस छद्म-क्लास की विशिष्टता उसके आर्ग्युमेंटों की परवाह किए बिना शून्य होती है?
पुनरावृत्ति
:not() चयन को उलट देता है और कई आर्ग्युमेंट स्वीकार करता है। :is() सूची में से किसी भी चयनकर्ता से मेल खाता है और उस सूची की सबसे अधिक विशिष्टता अपनाता है। :where() भी यही करता है, लेकिन इसकी विशिष्टता शून्य होती है—रीसेट के लिए बिल्कुल उपयुक्त। तीनों त्रुटि-सहिष्णु विश्लेषण का उपयोग करते हैं और अमान्य चयनकर्ताओं को चुपचाप अनदेखा कर देते हैं।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “:not() :is() और :where()” पाठ निःशुल्क है?
हाँ—“:not() :is() और :where()” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“:not() :is() और :where()” में मैं क्या सीखूँगा?
:not() से elements को बाहर कीजिए, :is() से सूची में से किसी से मिलान कीजिए और कम specificity के लिए :where() का उपयोग कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“:not() :is() और :where()” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- :hover :focus :active और :visited
- :nth-child और :nth-of-type
- :not() :is() और :where()
- :checked :disabled और फ़ॉर्म अवस्था के Pseudo