सूडो-क्लास

सीएसएस पॉडकास्ट - 015: बदली हुई क्लासेज़

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

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

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

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

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

:hover

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

:active

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

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

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

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

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

button:focus {
    outline: none;
}

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

button:focus {
    outline: none;
}

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

:target

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

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

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

#content:target {
    background: yellow;
}

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

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

:link

: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 {}

फ़ॉर्म के स्टेटस

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

:disabled और :enabled

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

:checked और :indeterminate

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

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

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

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

:placeholder-shown

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

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

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

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

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

इंडेक्स, क्रम, और परफ़ॉर्मेंस के हिसाब से एलिमेंट चुनना

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

:first-child और :last-child

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

:only-child

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

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

आपके पास :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;
}

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

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

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

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

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

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

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

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

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

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

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

:only-of-type

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

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

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

:empty

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

<div>
</div>

इसकी वजह यह है कि <div> के खुलने और बंद होने के बीच कुछ खाली जगह है, इसलिए खाली नहीं है.

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

<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()

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

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

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

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

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

:not()

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

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

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

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

आपने जो सीखा है उसकी जांच करें

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