Google I/O से जुड़े रहने के लिए धन्यवाद! मांग पर वीडियो देखें.

इस पेज का अनुवाद Cloud Translation API से किया गया है.

सूडो-क्लास

The CSS Podcast - 015: Pseudo-classes

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

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

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

इंटरैक्टिव स्थितियां

उपयोगकर्ता के आपके पेज से इंटरैक्ट करने की वजह से, ये सूडो-क्लास लागू होती हैं.

`:hover`

Browser Support

Source

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

`:active`

Browser Support

Source

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

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

Browser Support

Source

अगर कोई एलिमेंट फ़ोकस पा सकता है, जैसे कि <button>, तो :focus सूडो-क्लास का इस्तेमाल करके, उस स्थिति पर प्रतिक्रिया दी जा सकती है.

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

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

button:focus {
    outline: none;
}

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

button:focus {
    outline: none;
}

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

`:target`

Browser Support

Source

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

<article id="content">
    <!-- ... -->
</article>

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

#content:target {
    background: yellow;
}

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

ऐतिहासिक स्थितियां

`:link`

Browser Support

Source

:link स्यूडो-क्लास को किसी भी <a> एलिमेंट पर लागू किया जा सकता है. इसके लिए, उस एलिमेंट में href वैल्यू होनी चाहिए और उसे विज़िट न किया गया हो.

`:visited`

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

ऑर्डर का महत्व

अगर आपने :visited स्टाइल तय की है, तो इसे लिंक स्यूडो-क्लास से बदला जा सकता है. हालांकि, ऐसा तब ही किया जा सकता है, जब लिंक स्यूडो-क्लास की प्राथमिकता कम से कम उतनी ही हो. इसलिए, हमारा सुझाव है कि आप एलवीएचए नियम का इस्तेमाल करें. इससे, लिंक को खास क्रम में स्यूडो-क्लास के साथ स्टाइल किया जा सकता है: :link, :visited, :hover, :active.

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

ध्यान दें: सुरक्षा की वजहों से, :visited सूडो-क्लास का इस्तेमाल करके सिर्फ़ उन स्टाइल को बदला जा सकता है जिन्हें :link या unvisited स्टेट के तौर पर तय किया गया है. इसलिए, यह ज़रूरी है कि आप सबसे पहले उन स्टाइल को तय करें जिन्हें बदला जा सकता है. एलवीएचए के नियम का पालन करने से, इस समस्या को ठीक करने में मदद मिलेगी.

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

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

`:disabled` और `:enabled`

Browser Support

Source

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

`:checked` और `:indeterminate`

Browser Support

Source

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

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

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

<progress> एलिमेंट की स्थिति का पता नहीं लगाया जा सकता. इसे स्टाइल किया जा सकता है. आम तौर पर, इसे धारीदार दिखाया जाता है, ताकि यह पता चल सके कि इसमें और कितना डेटा शामिल किया जाना है.

`:placeholder-shown`

Browser Support

Source

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

पुष्टि की अलग-अलग स्थितियां

Browser Support

Source

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

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

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

ध्यान दें: सिर्फ़ रंग के आधार पर स्टेटस में हुए बदलावों को दिखाना सही नहीं है. खास तौर पर, लाल और हरे रंग का इस्तेमाल करने से बचें. ऐसा इसलिए, क्योंकि कलरब्लाइंड और कम दृष्टि वाले लोगों को स्टेटस में हुए बदलाव को देखने में परेशानी हो सकती है. ऐसा भी हो सकता है कि वे बदलाव को पूरी तरह से न देख पाएं. स्टेट में हुए बदलावों को दिखाने के लिए, रंग का इस्तेमाल करना एक अच्छा तरीका है. साथ ही, टेक्स्ट और आइकॉन में हुए बदलावों को दिखाने के लिए भी रंग का इस्तेमाल किया जा सकता है

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

स्यूडो-क्लास का एक ग्रुप होता है. ये ग्रुप, दस्तावेज़ में मौजूद आइटम की जगह के आधार पर उन्हें चुनते हैं.

`:first-child` और `:last-child`

Browser Support

Source

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

`:only-child`

Browser Support

Source

:only-child सूडो-क्लास की मदद से, ऐसे एलिमेंट भी चुने जा सकते हैं जिनके कोई सिबलिंग नहीं हैं.

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

Browser Support

Source

:first-of-type और :last-of-type को चुना जा सकता है. ये दोनों, :first-child और :last-child की तरह ही काम करते हैं. हालांकि, इस एचटीएमएल पर ध्यान दें:

<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 सूडो-क्लास काम की है.

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

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

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

Browser Support

Source

हालांकि, ऐसा ज़रूरी नहीं है कि आप सिर्फ़ पहले और आखिरी चाइल्ड एलिमेंट और टाइप का इस्तेमाल करें. :nth-child और :nth-of-type सूडो-क्लास की मदद से, किसी इंडेक्स पर मौजूद एलिमेंट को तय किया जा सकता है. सीएसएस सिलेक्टर में इंडेक्सिंग की शुरुआत 1 से होती है.

:nth-last-child() और :nth-last-of-type() छद्म क्लास, शुरुआत के बजाय आखिर से गिनती करती हैं.

इन स्यूडो-क्लास में, इंडेक्स के अलावा और भी चीज़ें पास की जा सकती हैं. अगर आपको सभी सम संख्याओं को चुनना है, तो :nth-child(even) का इस्तेमाल करें.

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

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

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

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

:nth-child() और :nth-last-child() में "of S" सिंटैक्स का इस्तेमाल किया जा सकता है. इससे, :nth-of-type() की तरह ही सिलेक्टर का इस्तेमाल करके, मैच किए गए एलिमेंट को फ़िल्टर किया जा सकता है. li:nth-of-type(even), :nth-child(even of li) के बराबर है. :nth-of-type की मदद से, सिर्फ़ एलिमेंट टाइप (जैसे कि li या p) के आधार पर फ़िल्टर किया जा सकता है. वहीं, "of S" सिंटैक्स की मदद से, किसी भी सिलेक्टर के आधार पर फ़िल्टर किया जा सकता है.

अगर आपके पास कोई टेबल है, तो हो सकता है कि आपको हर दूसरी लाइन में स्ट्राइप जोड़नी हो. tr:nth-child(even) का इस्तेमाल करके, हर दूसरी लाइन को टारगेट किया जा सकता है. हालांकि, अगर कुछ लाइनों को फ़िल्टर करके हटाया जाता है, तो यह काम नहीं करता. अगर hidden एट्रिब्यूट लागू करके फ़िल्टर करने की सुविधा चालू की जाती है, तो सिलेक्टर में of :not([hidden]) जोड़ा जा सकता है. इससे, सम संख्या वाली लाइनों को चुनने से पहले, छिपे हुए आइटम को पहले से फ़िल्टर किया जा सकेगा.

tr:nth-child(even of :not([hidden])){
  background: lightgrey;
}

इस तरह के सिलेक्टर को इस nth-child टेस्टर या इस क्वांटिटी सिलेक्टर टूल पर आज़माया जा सकता है.

`:only-of-type`

Browser Support

Source

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

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

कभी-कभी, पूरी तरह से खाली एलिमेंट की पहचान करना फ़ायदेमंद हो सकता है. इसके लिए, एक सूडो-क्लास भी मौजूद है.

`:empty`

Browser Support

Source

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

<div>
</div>

इसकी वजह यह है कि ओपनिंग और क्लोज़िंग <div> के बीच कुछ व्हाइटस्पेस है. इसलिए, :empty काम नहीं करेगा.

अगर आपके पास एचटीएमएल पर कम कंट्रोल है और आपको खाली एलिमेंट छिपाने हैं, तो :empty स्यूडो-क्लास का इस्तेमाल किया जा सकता है. जैसे, 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;
}

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

कुछ सूडो-क्लास की मदद से, ज़्यादा कॉम्पैक्ट सीएसएस लिखी जा सकती है.

`:is()`

Browser Support

Source

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

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

:is() स्यूडो-क्लास का इस्तेमाल करके, ज़्यादा कॉम्पैक्ट वर्शन लिखा जा सकता है:

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

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

`:not()`

Browser Support

Source

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

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

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

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

`:has()`

अगर आपको एलिमेंट को उनके अंदर मौजूद कॉन्टेंट के हिसाब से स्टाइल करना है, तो क्या करें? इसके लिए, :has() सूडो-क्लास का इस्तेमाल किया जा सकता है. उदाहरण के लिए, आपको आइकॉन वाले बटन पर स्टाइल लागू करनी पड़ सकती हैं.

 button:has(svg) {
  /* ... */
}

पिछले उदाहरण की तरह, सबसे बुनियादी कॉन्फ़िगरेशन में :has() को पैरंट सिलेक्टर के तौर पर इस्तेमाल किया जा सकता है. अन्य एलिमेंट को टारगेट करने के लिए, मैच करने वाले पैरंट सिलेक्टर को अन्य सिलेक्टर के साथ भी इस्तेमाल किया जा सकता है.

form:has(input:valid) label {
  font-weight: bold;
}

form:has(input:valid) label::after {
  content: "✅";
}

इस उदाहरण में, हम लेबल एलिमेंट और label::after स्यूडो-एलिमेंट पर स्टाइल लागू कर रहे हैं. ऐसा तब किया जाता है, जब फ़ॉर्म इनपुट में valid स्यूडो-क्लास मौजूद हो.

:has() स्यूडो-क्लास को किसी दूसरी :has() के अंदर नेस्ट नहीं किया जा सकता. हालांकि, इसे अन्य स्यूडो-क्लास के साथ जोड़ा जा सकता है.

:is(h1, h2, h3):has(a) {
   /* ... */
}

चुनने वालों की सूची में कोई भी अमान्य सिलेक्टर होने पर, स्टाइल के सभी नियमों को अनदेखा कर दिया जाएगा.

.my-element:has(img, ::before) {
  /* any styles here will be discarded since pseudo elements can't be included in the :has() selector list */
}

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

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

स्यूडो-क्लास, किसी एलिमेंट पर डाइनैमिक तरीके से क्लास लागू होने जैसा काम करती हैं. वहीं, स्यूडो-एलिमेंट, किसी एलिमेंट पर ही काम करते हैं.

सही

सिंगल या डबल : का इस्तेमाल, सिलेक्टर में मुख्य अंतर करने वाले वर्ण के तौर पर किया जाता है

गलत

स्यूडो-एलिमेंट, एलिमेंट के हिस्सों के लिए होते हैं, जबकि स्यूडो-क्लास, एलिमेंट की स्थिति के लिए होती हैं.

इनमें से कौनसी फ़ंक्शनल स्यूडो-क्लास है?

:is()

🎉

:target

फ़ंक्शनल सूडो-क्लास के बाद () होता है. इससे पता चलता है कि वे पैरामीटर स्वीकार करती हैं.

:empty

:not()

🎉

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

:hover

🎉

:press

फिर से कोशिश करें!

:squeeze

फिर से कोशिश करें!

:target

🎉

:focus-within

🎉

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

:enabled

🎉

:fresh

फिर से कोशिश करें!

:indeterminate

🎉

:checked

🎉

:in-range

🎉

:loading

फिर से कोशिश करें!

:valid

🎉

The CSS Podcast - 015: Pseudo-classes

इंटरैक्टिव स्थितियां

:hover

:active

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

:target

ऐतिहासिक स्थितियां

:link

:visited

ऑर्डर का महत्व

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

:disabled और :enabled

:checked और :indeterminate

:placeholder-shown

पुष्टि की अलग-अलग स्थितियां

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

:first-child और :last-child

:only-child

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

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

:only-of-type

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

:empty

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

:is()

:not()

:has()

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

`:hover`

`:active`

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

`:target`

`:link`

`:visited`

`:disabled` और `:enabled`

`:checked` और `:indeterminate`

`:placeholder-shown`

`:first-child` और `:last-child`

`:only-child`

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

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

`:only-of-type`

`:empty`

`:is()`

`:not()`

`:has()`