सूडो-क्लास

The CSS Podcast - 015: स्यूडो-क्लास

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

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

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

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

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

:hover

Browser Support

• 1
• 12
• 1
• 2

Source

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

:active

Browser Support

• 1
• 12
• 1
• 1

Source

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

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

Browser Support

• 1
• 12
• 1
• 1

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

• 1
• 12
• 1
• 1.3

Source

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

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

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

#content:target {
    background: yellow;
}

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

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

:link

Browser Support

• 1
• 12
• 1
• 1

Source

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

:visited

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

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

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

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

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

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

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

:disabled और :enabled

Browser Support

• 1
• 12
• 1
• 3.1

Source

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

:checked और :indeterminate

Browser Support

• 1
• 12
• 1
• 3.1

Source

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

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

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

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

:placeholder-shown

Browser Support

• 47
• 79
• 51
• 9

Source

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

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

Browser Support

• 10
• 12
• 4
• 5

Source

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

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

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

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

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

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

:first-child और :last-child

Browser Support

• 4
• 12
• 3
• 3.1

Source

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

:only-child

Browser Support

• 2
• 12
• 1.5
• 3.1

Source

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

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

Browser Support

• 1
• 12
• 3.5
• 3.1

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

• 1
• 12
• 3.5
• 3.1

Source

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

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

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

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

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

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

इस तरह के सिलेक्टर का इस्तेमाल करने के लिए, nth-child टेस्टर या संख्या चुनने वाले टूल का इस्तेमाल करें.

:only-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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

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

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

:empty

Browser Support

• 1
• 12
• 1
• 3.1

Source

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

<div>
</div>

इसकी वजह यह है कि <div> टैग के शुरू और आखिर में कुछ खाली जगह है, इसलिए खाली वैल्यू काम नहीं करेगी.

: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

• 88
• 88
• 78
• 14

Source

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

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

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

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

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

:not()

Browser Support

• 1
• 12
• 1
• 3.1

Source

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

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

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

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

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

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

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

सही

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

गलत

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

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

:is()

🎉

:target

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

:empty

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

:not()

🎉

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

:hover

🎉

:press

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

:squeeze

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

:target

🎉

:focus-within

🎉

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

:enabled

🎉

:fresh

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

:indeterminate

🎉

:checked

🎉

:in-range

🎉

:loading

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

:valid

🎉