सूडो-क्लास

द सीएसएस पॉडकास्ट - 015: सूडो-क्लास

मान लें कि आपको ईमेल पर साइन अप करने के लिए एक फ़ॉर्म मिला है. और आप चाहते हैं कि ईमेल फ़ॉर्म फ़ील्ड में अमान्य ईमेल पता मौजूद होने पर लाल बॉर्डर दिखाई दे. आपको ऐसा कैसे करना है? आपके पास :invalid सीएसएस pseudo-class का इस्तेमाल करने का विकल्प है. यह ब्राउज़र की दी गई कई pseudo-classes में से एक है.

pseudo-class की मदद से आप स्थिति में बदलाव और बाहरी फ़ैक्टर के आधार पर स्टाइल लागू कर सकते हैं. इसका मतलब है कि आपका डिज़ाइन, उपयोगकर्ता के इनपुट पर प्रतिक्रिया दे सकता है. जैसे, अमान्य ईमेल पता. इन्हें सिलेक्टर मॉड्यूल में शामिल किया गया है, और इस मॉड्यूल में आपको उनके बारे में ज़्यादा जानकारी मिलेगी.

नकली एलिमेंट से अलग, जिसके बारे में आपको पिछले मॉड्यूल में ज़्यादा जानकारी मिल सकती है. pseudo-classes , खास ऐसी स्थितियों के बारे में बताती हैं जिनमें कोई एलिमेंट हो सकता है, करने के लिए धन्यवाद.

इंटरैक्टिव स्टेट

आपके पेज के साथ उपयोगकर्ता के इंटरैक्शन के कारण निम्न pseudo-classes लागू होती हैं.

:hover

ब्राउज़र सहायता

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 2. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

अगर किसी उपयोगकर्ता के पास माउस या ट्रैकपैड जैसा पॉइंटिंग डिवाइस है, और वे उसे किसी एलिमेंट के ऊपर रखते हैं, आपके पास उस राज्य से जुड़ने के लिए स्टाइल लागू करने के लिए :hover. इससे यह संकेत दिया जा सकता है कि किसी एलिमेंट के साथ इंटरैक्ट किया जा सकता है.

:active

ब्राउज़र सहायता

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

यह स्थिति तब ट्रिगर होती है, जब किसी एलिमेंट के साथ सक्रिय रूप से इंटरैक्ट किया जा रहा होता है— जैसे कि क्लिक—क्लिक रिलीज़ होने से पहले. अगर माउस जैसे पॉइंटिंग डिवाइस का इस्तेमाल किया जाता है, तो यह स्थिति तब होती है, जब क्लिक शुरू होता है और अभी तक रिलीज़ नहीं हुआ है.

:focus, :focus-within, और :focus-visible

ब्राउज़र सहायता

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

अगर किसी एलिमेंट पर फ़ोकस किया जा सकता है—जैसे कि <button>— तो आपके पास यह विकल्प होता है कि :focus pseudo-class.

अगर आपके एलिमेंट के किसी चाइल्ड एलिमेंट पर फ़ोकस होता है, तब भी प्रतिक्रिया दी जा सकती है :focus-within.

फ़ोकस करने लायक एलिमेंट, जैसे कि बटन, उनके फ़ोकस में होने पर—यहां तक कि क्लिक करने पर भी फ़ोकस रिंग दिखाई देगी. ऐसी स्थिति में, डेवलपर इस सीएसएस को लागू करेगा:

button:focus {
    outline: none;
}

किसी तत्व पर फ़ोकस होने पर यह सीएसएस डिफ़ॉल्ट ब्राउज़र फ़ोकस रिंग को हटा देती है, इस वजह से, कीबोर्ड से वेब पेज पर नेविगेट करने वाले उपयोगकर्ताओं को सुलभता से जुड़ी एक समस्या का सामना करना पड़ता है. अगर फ़ोकस स्टाइल नहीं है, टैब बटन का इस्तेमाल करते समय, वे यह ट्रैक नहीं कर पाएंगे कि मौजूदा समय में फ़ोकस कहां है. :focus-visible के साथ जब किसी एलिमेंट को कीबोर्ड से फ़ोकस मिलता है, तो फ़ोकस स्टाइल प्रज़ेंट किया जा सकता है, साथ ही, outline: none नियम का इस्तेमाल करके, पॉइंटर डिवाइस के साथ इंटरैक्ट करने पर, उसे रोका जा सकता है.

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

ब्राउज़र सहायता

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 1.3. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

:target pseudo-class उस एलिमेंट को चुनता है जिसमें यूआरएल फ़्रैगमेंट से मिलता-जुलता id होता है. मान लें कि आपके पास यह एचटीएमएल है:

<article id="content">
    …
</article>

यूआरएल में #content शामिल होने पर, उस एलिमेंट में स्टाइल अटैच की जा सकती हैं.

#content:target {
    background: yellow;
}

यह उन क्षेत्रों को हाइलाइट करने के लिए उपयोगी है जिन्हें खास तौर पर जैसे, स्किप लिंक के ज़रिए वेबसाइट पर मौजूद मुख्य कॉन्टेंट.

ऐतिहासिक राज्य

ब्राउज़र सहायता

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

:link pseudo-class को ऐसे किसी भी <a> एलिमेंट पर लागू किया जा सकता है जिसमें href वैल्यू हो, जिस पर अब तक नहीं देखा गया है.

:visited

आप उपयोगकर्ता के पहले से देखे गए लिंक को शैली के तौर पर तय करने के लिए :visited pseudo-class. यह :link के उलट है, लेकिन आपके पास इस्तेमाल करने के लिए कम सीएसएस प्रॉपर्टी हैं सुरक्षा की वजहों के बारे में बताया गया है. आपके पास सिर्फ़ color, background-color, border-color, outline-color के साथ-साथ SVG fill और stroke का रंग.

ऑर्डर से जुड़े मामले

अगर आप :visited स्टाइल तय करते हैं, इसे कम से कम एक जैसी खासियत वाली लिंक pseudo-class से बदला जा सकता है. इस वजह से, हमारा सुझाव है कि pseudo-classes वाले लिंक को किसी खास क्रम में स्टाइल करने के लिए, LVHA नियम का इस्तेमाल करें: :link, :visited, :hover, :active.

a:link {}
a:visited {}
a:hover {}
a:active {}

फ़ॉर्म की स्थितियां

नीचे दी गई pseudo-classes, फ़ॉर्म एलिमेंट को चुन सकती हैं, अलग-अलग स्थितियों में ये एलिमेंट, उनसे इंटरैक्शन के दौरान हो सकते हैं.

:disabled और :enabled

ब्राउज़र सहायता

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 3.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

अगर फ़ॉर्म एलिमेंट, जैसे कि ब्राउज़र ने <button> बंद किया होता है, तो आप उसके साथ उस स्थिति में :disabled pseudo-class. :enabled विपरीत स्थिति के लिए, pseudo-class ऐप उपलब्ध है. हालांकि, फ़ॉर्म एलिमेंट भी डिफ़ॉल्ट रूप से :enabled होते हैं, इसलिए, हो सकता है कि आप इस नकली क्लास तक न पहुंच पाएं.

:checked और :indeterminate

ब्राउज़र सहायता

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 3.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

:checked pseudo-class तब उपलब्ध होता है जब एक सहायक फ़ॉर्म एलिमेंट, जैसे चेकबॉक्स या रेडियो बटन चेक स्थिति में हो.

:checked की स्थिति एक बाइनरी(सही या गलत) होती है, लेकिन चेकबॉक्स पर सही का निशान तब लगाया जाता है, जब उन्हें न तो चुना गया हो और न ही उससे सही का निशान हटाया गया हो. इसे :indeterminate स्थिति.

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

<progress> एलिमेंट में तय नहीं की जाने वाली स्थिति भी होती है, जिसे स्टाइल किया जा सकता है. इस्तेमाल का एक आम उदाहरण यह है कि इसे धारीदार तरीके से दिखाया जाए, ताकि यह पता चल सके कि और ज़्यादा की ज़रूरत है.

:placeholder-shown

ब्राउज़र सहायता

  • Chrome: 47. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 79. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 51. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 9. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

अगर किसी फ़ॉर्म फ़ील्ड में placeholder एट्रिब्यूट है और कोई वैल्यू नहीं है, तो :placeholder-shown उस स्थिति में स्टाइल अटैच करने के लिए pseudo-class का इस्तेमाल किया जा सकता है. जैसे ही फ़ील्ड में कॉन्टेंट होता है, भले ही, उसमें placeholder हो या न हो, यह राज्य अब लागू नहीं होगा.

पुष्टि की स्थितियां

ब्राउज़र सहायता

  • Chrome: 10. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 4. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 5. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

एचटीएमएल फ़ॉर्म की पुष्टि करने वाले फ़ॉर्म की पुष्टि के लिए, स्यूडो क्लास का इस्तेमाल किया जा सकता है, जैसे कि :valid :invalid और :in-range. :valid और :invalid pseudo-classes, कॉन्टेक्स्ट के लिए काम की हैं जैसे कि ईमेल फ़ील्ड, जिसमें pattern मौजूद है, जिसका मिलान करना ज़रूरी है, ताकि यह एक मान्य फ़ील्ड हो. वैल्यू की यह मान्य स्थिति उपयोगकर्ता को दिखाई जा सकती है, जिससे उन्हें यह समझने में मदद मिलती है कि वे सुरक्षित तरीके से अगले फ़ील्ड में जा सकते हैं.

अगर किसी इनपुट में min और max है, तो :in-range pseudo-class पैरामीटर उपलब्ध होगा, जैसे कि न्यूमेरिक इनपुट और वैल्यू इन सीमाओं के अंदर होती है.

एचटीएमएल फ़ॉर्म से, आपके पास यह तय करने का विकल्प है कि required एट्रिब्यूट का इस्तेमाल करके, किसी फ़ील्ड की जानकारी देना ज़रूरी है या नहीं. :required ज़रूरी फ़ील्ड के लिए, pseudo-class ऐप उपलब्ध होगा. जो फ़ील्ड ज़रूरी नहीं हैं उन्हें इसके साथ चुना जा सकता है: :optional pseudo-class.

इंडेक्स, क्रम, और आने वाले समय के हिसाब से एलिमेंट चुनना

pseudo-classes का एक ग्रुप है. यह दस्तावेज़ में आइटम की जगह के आधार पर आइटम चुनता है.

:first-child और :last-child

ब्राउज़र सहायता

  • Chrome: 4. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 3. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 3.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

अगर आपको पहला या आखिरी आइटम ढूंढना है, तो आप इसका इस्तेमाल कर सकते हैं :first-child और :last-child. ये pseudo-classes, सिबलिंग एलिमेंट के ग्रुप का पहला या आखिरी एलिमेंट दिखाएंगी.

:only-child

ब्राउज़र सहायता

  • Chrome: 2. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 1.5. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 3.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

आप ऐसे एलिमेंट भी चुन सकते हैं जिनका कोई सिबलिंग नहीं है, के साथ :only-child pseudo-class.

:first-of-type और :last-of-type

ब्राउज़र सहायता

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 3.5. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 3.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

आप :first-of-type और :last-of-type पहली बार में, लगता है कि वे :first-child और :last-child की तरह ही काम करते हैं, लेकिन इस HTML पर विचार करें:

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

और यह सीएसएस:

.my-parent div:first-child {
    color: red;
}

किसी भी एलिमेंट का रंग लाल नहीं होगा, क्योंकि पहला चाइल्ड एक पैराग्राफ़ है, न कि div. :first-of-type pseudo-class इस मामले में काम का है.

.my-parent div:first-of-type {
    color: red;
}

पहला <div> दूसरा बच्चा है, लेकिन यह अब भी .my-parent एलिमेंट में पहला टाइप है, इसलिए, इस नियम के तहत इसका रंग लाल होगा.

:nth-child और :nth-of-type

ब्राउज़र सहायता

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 3.5. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 3.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

आप पहले और आखिरी बच्चे और उसके टाइप तक सीमित नहीं हैं. :nth-child और :nth-of-type pseudo-classes से आपको ऐसा एलिमेंट तय करने की सुविधा मिलती है जो किसी खास इंडेक्स में है. सीएसएस सिलेक्टर में, इंडेक्स करना 1 से शुरू होता है.

इन pseudo-classes में भी इंडेक्स से ज़्यादा पास किया जा सकता है. अगर आपको सभी सम एलिमेंट चुनने थे, तो :nth-child(even) का इस्तेमाल किया जा सकता है.

आप ज़्यादा जटिल सिलेक्टर भी बना सकते हैं, जिसमें नियमित अंतराल पर आइटम मिलते हैं, An+B माइक्रोसिंटैक्स का इस्तेमाल करके.

li:nth-child(3n+3) {
    background: yellow;
}

यह सिलेक्टर हर तीसरे आइटम को चुनता है, आइटम 3 से शुरू. इस एक्सप्रेशन में n, इंडेक्स है. जो 3 (3n) के शून्य से शुरू होता है, आपको उस इंडेक्स से कितने गुणा करना होता है.

मान लें कि आपके पास <li> वाले सात आइटम हैं. चुना गया पहला आइटम 3 है, क्योंकि 3n+3 का अनुवाद (3 * 0) + 3 है. अगली बार आइटम 6 को चुना जाएगा, क्योंकि n का साइज़ अब बढ़कर 1 हो गया है, इसलिए (3 * 1) + 3). यह एक्सप्रेशन, :nth-child और :nth-of-type, दोनों के लिए काम करता है.

इस पर इस तरह के सिलेक्टर का इस्तेमाल किया जा सकता है nवें-चाइल्ड टेस्टर या यह संख्या चुनने वाला टूल.

:only-of-type

ब्राउज़र सहायता

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 3.5. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 3.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

आखिर में, भाई-बहनों के ग्रुप में, किसी खास तरह का सिर्फ़ एक एलिमेंट ढूंढा जा सकता है :only-of-type. यह तब काम आता है, जब आपको सिर्फ़ एक आइटम वाली सूचियां चुननी हों, या अगर आपको किसी पैराग्राफ़ में एकमात्र बोल्ड एलिमेंट खोजना हो.

खाली एलिमेंट ढूंढना

कभी-कभी पूरी तरह से खाली एलिमेंट की पहचान करना मददगार हो सकता है, और उसके लिए एक छद्म श्रेणी भी है.

:empty

ब्राउज़र सहायता

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 3.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

अगर किसी एलिमेंट में कोई चाइल्ड नहीं है, तो उन पर :empty सूडो-क्लास लागू होती है. बच्चे सिर्फ़ एचटीएमएल एलिमेंट या टेक्स्ट नोड नहीं होते: वे खाली सफ़ेद जगह भी हो सकते हैं, ऐसा करना तब उलझन भरा हो सकता है, जब नीचे दिए गए एचटीएमएल को डीबग किया जा रहा हो और यह पूछा जा रहा हो कि यह :empty के साथ काम क्यों नहीं करता:

<div>
</div>

इसकी वजह यह है कि ओपनिंग और क्लोज़िंग <div> के बीच में कुछ खाली सफ़ेद जगह है, तो खाली छोड़ दें, यह काम नहीं करेगा.

अगर एचटीएमएल पर आपका कम कंट्रोल है और आपको खाली एलिमेंट छिपाना है, तो :empty pseudo-class टैग काम का हो सकता है जैसे कि WYSIWYG कॉन्टेंट एडिटर. यहां एक एडिटर ने एक खाली पैराग्राफ़ जोड़ा है.

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

:empty की मदद से, उसे ढूंढा और छिपाया जा सकता है.

.post :empty {
    display: none;
}

एक से ज़्यादा एलिमेंट ढूंढना और उन्हें बाहर रखना

कुछ pseudo-classes से आपको ज़्यादा कॉम्पैक्ट सीएसएस लिखने में मदद मिलती है.

:is()

ब्राउज़र सहायता

  • Chrome: 88. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 88. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 78. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 14. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

अगर आपको किसी .post एलिमेंट में सभी h2, li, और img चाइल्ड एलिमेंट देखने हैं, तो आप सिलेक्टर की सूची इस तरह लिख सकते हैं:

.post h2,
.post li,
.post img {
    …
}

:is() के साथ pseudo-class, तो आप एक ज़्यादा संक्षिप्त वर्शन लिख सकते हैं:

.post :is(h2, li, img) {
    …
}

:is pseudo-class, सिलेक्टर की सूची की तुलना में ज़्यादा छोटा होने के साथ-साथ, ज़्यादा मुश्किल भी है. ज़्यादातर मामलों में, अगर सिलेक्टर की सूची में कोई गड़बड़ी है या ऐसा सिलेक्टर दिया गया है जो काम नहीं करता, सिलेक्टर की पूरी सूची काम नहीं करेगी. अगर :is pseudo-class में पास किए गए सिलेक्टर में कोई गड़बड़ी है, यह अमान्य सिलेक्टर को अनदेखा कर देगा, लेकिन मान्य विकल्पों का इस्तेमाल करेगा.

:not()

ब्राउज़र सहायता

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 3.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

आप :not() pseudo-class. उदाहरण के लिए, इसका इस्तेमाल उन सभी लिंक को स्टाइल करने के लिए किया जा सकता है जिनमें class एट्रिब्यूट नहीं है.

a:not([class]) {
    color: blue;
}

सुलभता सुविधाओं को बेहतर बनाने में, :not pseudo-class की मदद से भी मदद मिल सकती है. उदाहरण के लिए, <img> में alt होना चाहिए. भले ही, वह वैल्यू खाली हो, ताकि आप एक ऐसा सीएसएस नियम लिख सकें जो अमान्य इमेज में मोटा लाल आउटलाइन जोड़ता हो:

img:not([alt]) {
    outline: 10px red;
}

देखें कि आपको कितना समझ आया है

सूडो क्लास के बारे में अपनी जानकारी को परखें

बदली हुई क्लास, ऐसे काम करती हैं जैसे कि किसी क्लास को एलिमेंट पर डाइनैमिक तौर पर लागू किया गया हो, जबकि स्यूडो एलिमेंट, एलिमेंट पर काम करते हों.

सही
सिलेक्टर में, सिंगल या डबल : को मुख्य वर्ण के तौर पर इस्तेमाल करते हुए देखें
गलत
सूडो-एलिमेंट, प्रॉडक्ट के अलग-अलग हिस्सों के लिए होते हैं, जबकि बदली हुई कैटगरी वाले एलिमेंट राज्य के लिए होते हैं.

इनमें से कौनसी एक फ़ंक्शनल pseudo-class है?

:is()
🎉
:target
फ़ंक्शनल pseudo-classes के बाद () होते हैं. इससे पता चलता है कि वे पैरामीटर स्वीकार करती हैं.
:empty
फ़ंक्शनल pseudo-classes के बाद () होते हैं. इससे पता चलता है कि वे पैरामीटर स्वीकार करती हैं.
:not()
🎉

इनमें से कौनसी pseudo-classes, उपयोगकर्ता के इंटरैक्शन की वजह से हैं?

:hover
🎉
:press
फिर से कोशिश करें!
:squeeze
फिर से कोशिश करें!
:target
🎉
:focus-within
🎉

इनमें से <form> स्टेट सूडो क्लास कौनसी हैं?

:enabled
🎉
:fresh
फिर से कोशिश करें!
:indeterminate
🎉
:checked
🎉
:in-range
🎉
:loading
फिर से कोशिश करें!
:valid
🎉