द सीएसएस पॉडकास्ट - 015: सूडो-क्लास
मान लें कि आपको ईमेल पर साइन अप करने के लिए एक फ़ॉर्म मिला है.
और आप चाहते हैं कि ईमेल फ़ॉर्म फ़ील्ड में अमान्य ईमेल पता मौजूद होने पर लाल बॉर्डर दिखाई दे.
आपको ऐसा कैसे करना है?
आपके पास :invalid
सीएसएस pseudo-class का इस्तेमाल करने का विकल्प है.
यह ब्राउज़र की दी गई कई pseudo-classes में से एक है.
pseudo-class की मदद से आप स्थिति में बदलाव और बाहरी फ़ैक्टर के आधार पर स्टाइल लागू कर सकते हैं. इसका मतलब है कि आपका डिज़ाइन, उपयोगकर्ता के इनपुट पर प्रतिक्रिया दे सकता है. जैसे, अमान्य ईमेल पता. इन्हें सिलेक्टर मॉड्यूल में शामिल किया गया है, और इस मॉड्यूल में आपको उनके बारे में ज़्यादा जानकारी मिलेगी.
नकली एलिमेंट से अलग, जिसके बारे में आपको पिछले मॉड्यूल में ज़्यादा जानकारी मिल सकती है. pseudo-classes , खास ऐसी स्थितियों के बारे में बताती हैं जिनमें कोई एलिमेंट हो सकता है, करने के लिए धन्यवाद.
इंटरैक्टिव स्टेट
आपके पेज के साथ उपयोगकर्ता के इंटरैक्शन के कारण निम्न pseudo-classes लागू होती हैं.
:hover
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अगर किसी उपयोगकर्ता के पास माउस या ट्रैकपैड जैसा पॉइंटिंग डिवाइस है,
और वे उसे किसी एलिमेंट के ऊपर रखते हैं,
आपके पास उस राज्य से जुड़ने के लिए
स्टाइल लागू करने के लिए :hover
.
इससे यह संकेत दिया जा सकता है कि किसी एलिमेंट के साथ इंटरैक्ट किया जा सकता है.
:active
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
यह स्थिति तब ट्रिगर होती है, जब किसी एलिमेंट के साथ सक्रिय रूप से इंटरैक्ट किया जा रहा होता है— जैसे कि क्लिक—क्लिक रिलीज़ होने से पहले. अगर माउस जैसे पॉइंटिंग डिवाइस का इस्तेमाल किया जाता है, तो यह स्थिति तब होती है, जब क्लिक शुरू होता है और अभी तक रिलीज़ नहीं हुआ है.
:focus
, :focus-within
, और :focus-visible
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अगर किसी एलिमेंट पर फ़ोकस किया जा सकता है—जैसे कि <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
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
:target
pseudo-class उस एलिमेंट को चुनता है जिसमें यूआरएल फ़्रैगमेंट से मिलता-जुलता id
होता है.
मान लें कि आपके पास यह एचटीएमएल है:
<article id="content">
…
</article>
यूआरएल में #content
शामिल होने पर, उस एलिमेंट में स्टाइल अटैच की जा सकती हैं.
#content:target {
background: yellow;
}
यह उन क्षेत्रों को हाइलाइट करने के लिए उपयोगी है जिन्हें खास तौर पर जैसे, स्किप लिंक के ज़रिए वेबसाइट पर मौजूद मुख्य कॉन्टेंट.
ऐतिहासिक राज्य
:link
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
: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
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अगर फ़ॉर्म एलिमेंट,
जैसे कि ब्राउज़र ने <button>
बंद किया होता है,
तो आप उसके साथ उस स्थिति में
:disabled
pseudo-class.
:enabled
विपरीत स्थिति के लिए, pseudo-class ऐप उपलब्ध है.
हालांकि, फ़ॉर्म एलिमेंट भी डिफ़ॉल्ट रूप से :enabled
होते हैं,
इसलिए, हो सकता है कि आप इस नकली क्लास तक न पहुंच पाएं.
:checked
और :indeterminate
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
:checked
pseudo-class तब उपलब्ध होता है जब एक सहायक फ़ॉर्म एलिमेंट,
जैसे चेकबॉक्स या रेडियो बटन चेक स्थिति में हो.
:checked
की स्थिति एक बाइनरी(सही या गलत) होती है,
लेकिन चेकबॉक्स पर सही का निशान तब लगाया जाता है, जब उन्हें न तो चुना गया हो और न ही उससे सही का निशान हटाया गया हो.
इसे
:indeterminate
स्थिति.
ऐसा तब होता है, जब आपके पास "सभी चुनें" विकल्प हो कंट्रोल की जा सकती है, जो ग्रुप के सभी चेकबॉक्स को चेक करता है. अगर उपयोगकर्ता को इनमें से किसी चेकबॉक्स से सही का निशान हटाना है, रूट चेकबॉक्स में अब "सभी" शब्द नहीं दिखेंगे जांच की जा रही है, इसलिए, उसे अनिश्चित स्थिति में रखा जाना चाहिए.
<progress>
एलिमेंट में तय नहीं की जाने वाली स्थिति भी होती है, जिसे स्टाइल किया जा सकता है.
इस्तेमाल का एक आम उदाहरण यह है कि इसे धारीदार तरीके से दिखाया जाए, ताकि यह पता चल सके कि और ज़्यादा की ज़रूरत है.
:placeholder-shown
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अगर किसी फ़ॉर्म फ़ील्ड में placeholder
एट्रिब्यूट है और कोई वैल्यू नहीं है, तो
:placeholder-shown
उस स्थिति में स्टाइल अटैच करने के लिए pseudo-class का इस्तेमाल किया जा सकता है.
जैसे ही फ़ील्ड में कॉन्टेंट होता है,
भले ही, उसमें placeholder
हो या न हो,
यह राज्य अब लागू नहीं होगा.
पुष्टि की स्थितियां
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
एचटीएमएल फ़ॉर्म की पुष्टि करने वाले फ़ॉर्म की पुष्टि के लिए, स्यूडो क्लास का इस्तेमाल किया जा सकता है, जैसे कि
: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
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अगर आपको पहला या आखिरी आइटम ढूंढना है, तो
आप इसका इस्तेमाल कर सकते हैं
:first-child
और
:last-child
.
ये pseudo-classes, सिबलिंग एलिमेंट के ग्रुप का पहला या आखिरी एलिमेंट दिखाएंगी.
:only-child
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
आप ऐसे एलिमेंट भी चुन सकते हैं जिनका कोई सिबलिंग नहीं है,
के साथ
:only-child
pseudo-class.
:first-of-type
और :last-of-type
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
आप
: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
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
आप पहले और आखिरी बच्चे और उसके टाइप तक सीमित नहीं हैं.
: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
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
आखिर में, भाई-बहनों के ग्रुप में, किसी खास तरह का सिर्फ़ एक एलिमेंट ढूंढा जा सकता है
:only-of-type
.
यह तब काम आता है, जब आपको सिर्फ़ एक आइटम वाली सूचियां चुननी हों,
या अगर आपको किसी पैराग्राफ़ में एकमात्र बोल्ड एलिमेंट खोजना हो.
खाली एलिमेंट ढूंढना
कभी-कभी पूरी तरह से खाली एलिमेंट की पहचान करना मददगार हो सकता है, और उसके लिए एक छद्म श्रेणी भी है.
:empty
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अगर किसी एलिमेंट में कोई चाइल्ड नहीं है, तो
उन पर :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()
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
अगर आपको किसी .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()
ब्राउज़र सहायता
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
आप
:not()
pseudo-class.
उदाहरण के लिए, इसका इस्तेमाल उन सभी लिंक को स्टाइल करने के लिए किया जा सकता है जिनमें class
एट्रिब्यूट नहीं है.
a:not([class]) {
color: blue;
}
सुलभता सुविधाओं को बेहतर बनाने में, :not
pseudo-class की मदद से भी मदद मिल सकती है.
उदाहरण के लिए, <img>
में alt
होना चाहिए. भले ही, वह वैल्यू खाली हो,
ताकि आप एक ऐसा सीएसएस नियम लिख सकें जो अमान्य इमेज में मोटा लाल आउटलाइन जोड़ता हो:
img:not([alt]) {
outline: 10px red;
}
देखें कि आपको कितना समझ आया है
सूडो क्लास के बारे में अपनी जानकारी को परखें
बदली हुई क्लास, ऐसे काम करती हैं जैसे कि किसी क्लास को एलिमेंट पर डाइनैमिक तौर पर लागू किया गया हो, जबकि स्यूडो एलिमेंट, एलिमेंट पर काम करते हों.
इनमें से कौनसी एक फ़ंक्शनल pseudo-class है?
:not()
:empty
:is()
:target
इनमें से कौनसी pseudo-classes, उपयोगकर्ता के इंटरैक्शन की वजह से हैं?
:hover
:focus-within
:squeeze
:press
:target
इनमें से <form>
स्टेट सूडो क्लास कौनसी हैं?
:enabled
:in-range
:fresh
:loading
:valid
:checked
:indeterminate