: नहीं () - सीएसएस-ट्रिक्स

Anonim

:not()सीएसएस में संपत्ति एक निषेध छद्म वर्ग है और एक सरल चयनकर्ता या एक तर्क के रूप में एक चयनकर्ता सूची स्वीकार करता है। यह एक ऐसे तत्व से मेल खाता है जो तर्क से प्रतिनिधित्व नहीं करता है। पारित तर्क में अतिरिक्त चयनकर्ता या कोई छद्म तत्व चयनकर्ता नहीं हो सकते हैं।

एक तर्क के रूप में चयनकर्ताओं की सूची का उपयोग करने की क्षमता को प्रयोगात्मक माना जाता है, हालांकि इसका समर्थन सफारी (2015 से), फ़ायरफ़ॉक्स (दिसंबर 2020 से) और क्रोम (जनवरी 2021 से) सहित इस लेखन के समय बढ़ रहा है।

/* the X argument can be replaced with any simple selectors */ :not(X) ( property: value; )

इस उदाहरण में हमारे पास एक एकल वर्ग के साथ एक अव्यवस्थित सूची है

  • : 
    

      

    •

    हमारा CSS सभी का चयन करेगा

  • एक वर्ग को छोड़कर अन्य तत्व .different। 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    आप छद्म वर्गों का उपयोग करके भी ऐसा कर सकते हैं जिन्हें एक साधारण चयनकर्ता माना जाता है।

    p:not(:nth-child(2n+1)) ( font-size: 3em; )

    हालाँकि यदि हम अपने तर्क के रूप में एक छद्म तत्व चयनकर्ता का उपयोग करते हैं तो यह अपेक्षित परिणाम नहीं देगा।

    :not(::first-line) ( /* ::first-line is a pseudo element selector and not a simple selector */ color: white; )

    जटिल चयनकर्ता

    /* select all

    s that are not descendants of */ p:not(article *) ( )

    दृश्य उदाहरण

    के विभिन्न उपयोगों के दृश्य प्रतिनिधित्व :not()

    विशेषता

    की विशिष्टता :not छद्म वर्ग अपनी तर्क की विशिष्टता है। :not() छद्म वर्ग अन्य छद्म वर्गों के विपरीत, चयनकर्ता विशिष्टता में शामिल नहीं होते।

    नेगेटिव्स नेस्टेड नहीं हो सकते हैं इसलिए :not(:not(… )) कभी भी अनुमति नहीं दी जाती है। लेखकों को यह भी ध्यान रखना चाहिए कि चूंकि छद्म तत्वों को एक साधारण चयनकर्ता नहीं माना जाता है, इसलिए वे तर्क के रूप में मान्य नहीं हैं :not(X)। विशेषता चयनकर्ताओं का उपयोग करते समय ध्यान रखें कि कुछ व्यापक रूप से दूसरों के रूप में समर्थित नहीं हैं। चेनिंग :not दूसरे के साथ चयनकर्ताओं :not चयनकर्ताओं की अनुमति है।

    ब्राउज़र का समर्थन

    :not()छद्म वर्ग एक तर्क सूची अनुमति देने के लिए सीएसएस चयनकर्ता स्तर 4 विनिर्देश में अद्यतन किया गया है। CSS Selectors Level 3 में, यह केवल एक साधारण चयनकर्ता को स्वीकार करने में सक्षम था। नतीजतन, ब्राउज़र समर्थन स्तर 3 और स्तर 4 ड्राफ्ट के बीच थोड़ा विभाजित है।

    सरल चयनकर्ता

    अर्थात एज फ़ायर्फ़ॉक्स क्रोम सफारी ओपेरा
    9+ सब सब सब 12.1+ सब
    Android क्रोम Android फ़ायरफ़ॉक्स Android ब्राउज़र iOS सफारी ओपेरा मोबाइल
    सब सब सब सब सब

    चयनकर्ता सूची

    यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

    डेस्कटॉप

    क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
    88 .४ नहीं न 88 ९

    मोबाइल / टेबलेट

    Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
    88 .५ 81 9.0-9.2

    अधिक जानकारी

    • CSS चयनकर्ता मॉड्यूल स्तर 3
    • CSS चयनकर्ता स्तर 4 विनिर्देश