हम HTML में मौजूद एलिमेंट्स पर विशिष्ट स्टाइल्स जोड़ने के लिए CSS स्यूडो क्लासेस का उपयोग कर सकते हैं जो किसी एलिमेंट को एक विशिष्ट स्थिति (जैसे होवर, विजिटेड, डिसेबल्ड, आदि) के साथ चुनती हैं।
नोट: CSS3 में, स्यूडो क्लासेस सिंगल-कॉलन नोटेशन का उपयोग करती हैं ताकि उन्हें स्यूडो एलिमेंट्स से अलग किया जा सके।
सिंटैक्स
किसी एलिमेंट पर CSS स्यूडो क्लासेस के उपयोग का सिंटैक्स निम्नलिखित है:
Selector:pseudo-class { css-property: /*value*/; }
निम्नलिखित सभी उपलब्ध CSS स्यूडो क्लासेस हैं:
| क्र.सं. | स्यूडो-क्लास और विवरण |
|---|---|
| 1 | active उल्लिखित सक्रिय एलिमेंट को चुनता है |
| 2 | checked प्रत्येक चेक्ड उल्लिखित एलिमेंट को चुनता है |
| 3 | disabled प्रत्येक डिसेबल्ड उल्लिखित एलिमेंट को चुनता है |
| 4 | empty ऐसे प्रत्येक उल्लिखित एलिमेंट को चुनता है जिसके कोई चाइल्ड नहीं हैं |
| 5 | enabled प्रत्येक इनेबल्ड उल्लिखित एलिमेंट को चुनता है |
| 6 | first-child अपने पैरेंट का पहला चाइल्ड होने वाले प्रत्येक उल्लिखित एलिमेंट को चुनता है |
| 7 | first-of-type अपने पैरेंट का पहला उल्लिखित टाइप का एलिमेंट होने वाले प्रत्येक एलिमेंट को चुनता है |
| 8 | focus फोकस वाले उल्लिखित एलिमेंट को चुनता है |
| 9 | hover माउस ओवर पर उल्लिखित एलिमेंट्स को चुनता है |
| 10 | in-range निर्दिष्ट रेंज के भीतर मान वाले उल्लिखित एलिमेंट्स को चुनता है |
| 11 | invalid अमान्य मान वाले सभी उल्लिखित एलिमेंट्स को चुनता है |
| 12 | lang(language) "language" से शुरू होने वाले lang एट्रिब्यूट मान वाले प्रत्येक उल्लिखित एलिमेंट को चुनता है |
| 13 | last-child अपने पैरेंट का अंतिम चाइल्ड होने वाले प्रत्येक उल्लिखित एलिमेंट को चुनता है |
| 14 | last-of-type अपने पैरेंट का अंतिम उल्लिखित टाइप का एलिमेंट होने वाले प्रत्येक एलिमेंट को चुनता है |
| 15 | link सभी अनविजिटेड उल्लिखित एलिमेंट्स को चुनता है |
| 16 | not(selector) उल्लिखित एलिमेंट नहीं होने वाले प्रत्येक एलिमेंट को चुनता है |
| 17 | nth-child(n) अपने पैरेंट का nth चाइल्ड होने वाले प्रत्येक उल्लिखित एलिमेंट को चुनता है |
| 18 | nth-last-child(n) अंतिम चाइल्ड से गिनती करते हुए अपने पैरेंट का nth चाइल्ड होने वाले प्रत्येक उल्लिखित एलिमेंट को चुनता है |
| 19 | nth-last-of-type(n) अंतिम चाइल्ड से गिनती करते हुए अपने पैरेंट का nth उल्लिखित टाइप का एलिमेंट होने वाले प्रत्येक एलिमेंट को चुनता है |
| 20 | nth-of-type(n) अपने पैरेंट का nth उल्लिखित टाइप का एलिमेंट होने वाले प्रत्येक एलिमेंट को चुनता है |
| 21 | only-of-type अपने पैरेंट का एकमात्र उल्लिखित टाइप का एलिमेंट होने वाले प्रत्येक एलिमेंट को चुनता है |
| 22 | only-child अपने पैरेंट का एकमात्र चाइल्ड होने वाले प्रत्येक उल्लिखित एलिमेंट को चुनता है |
| 23 | optional "required" एट्रिब्यूट के बिना उल्लिखित एलिमेंट्स को चुनता है |
| 24 | out-of-range निर्दिष्ट रेंज से बाहर मान वाले उल्लिखित एलिमेंट्स को चुनता है |
| 25 | read-only "readonly" एट्रिब्यूट वाले उल्लिखित एलिमेंट्स को चुनता है |
| 26 | read-write "readonly" एट्रिब्यूट के बिना उल्लिखित एलिमेंट्स को चुनता है |
| 27 | required "required" एट्रिब्यूट वाले उल्लिखित एलिमेंट्स को चुनता है |
| 28 | root डॉक्यूमेंट के रूट एलिमेंट को चुनता है |
| 29 | target वर्तमान सक्रिय उल्लिखित एलिमेंट को चुनता है (उस एंकर नाम वाले URL पर क्लिक करने पर) |
| 30 | valid मान्य मान वाले सभी उल्लिखित एलिमेंट्स को चुनता है |
| 31 | visited सभी विजिटेड उल्लिखित एलिमेंट्स को चुनता है |
उदाहरण
आइए CSS स्यूडो क्लास का एक उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS Anchor Pseudo Classes</title> </head> <style> div { color: #000; padding:20px; background-image: linear-gradient(135deg, grey 0%, white 100%); text-align: center; } .anchor { color: #FF8A00; } .anchor:last-child { color: #03A9F4; } .anchor:visited { color: #FEDC11; } .anchor:hover { color: #C303C3; } .anchor:active { color: #4CAF50; } </style> <body> <div> <h1>Search Engines</h1> <a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a> <a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a> </div> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देगा:
एक और उदाहरण
आइए CSS स्यूडो क्लास का एक और उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS Pseudo Classes</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; box-sizing: border-box; } .child{ display: inline-block; height: 40px; width: 40px; color: white; border: 4px solid black; } .child:nth-of-type(1){ background-color: #FF8A00; } .child:nth-of-type(2){ background-color: #F44336; } .child:nth-of-type(3){ background-color: #C303C3; } .child:nth-of-type(4){ background-color: #4CAF50; } .child:nth-of-type(5){ background-color: #03A9F4; } .child:nth-of-type(6){ background-color: #FEDC11; } .child:hover{ background-color: #000; } </style> </head> <body> <form> <fieldset> <legend>CSS-Pseudo-Classes</legend> <div id="container"> <div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div> </div><br> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देगा:
जब div एलिमेंट्स पर होवर न हो:
जब div एलिमेंट्स पर होवर हो:
