CSS स्यूडो क्लासेस विभिन्न एलिमेंट्स की विशेष स्थितियों का प्रतिनिधित्व करती हैं, ये क्लासेस न केवल डॉक्यूमेंट में बेसिक एलिमेंट्स को दर्शाती हैं बल्कि उनके एक्सटर्नल फैक्टर्स जैसे स्टेटस, पोजिशन, हिस्ट्री आदि को भी दर्शाती हैं। इन स्यूडो क्लासेस का उपयोग करके डेवलपर उन एलिमेंट्स को भी स्टाइल कर सकते हैं जिन्हें सीधे CSS सेलेक्टर्स के माध्यम से नहीं चुना जा सकता।
सिंटैक्स
किसी एलिमेंट पर CSS स्यूडो क्लासेस के उपयोग का सिंटैक्स निम्नलिखित है:
Selector:pseudo-class { css-property: /*value*/; }
उदाहरण
आइए CSS स्यूडो क्लासेस का उपयोग करने का एक उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS Pseudo Class</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input:valid { color: #fefefe; background-color: #4CAF50; } input:invalid { color: #fefefe; background-color: #DC3545; } </style> </head> <body> <form> <fieldset> <legend>CSS Pseudo Class</legend> <label for="EmailSelect">Email : <input type="email" id="EmailSelect" size="25" required> </label><br> <label for="PassSelect">Password : <input type="password" id="PassSelect" minlength="8" required> </label> <div id="divDisplay">Min. Strength of Password: 8<br>Both Fields are Required</div> </fieldset> </form> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देगा:
जब फॉर्म फील्ड्स में अमान्य डेटा हो:
जब फॉर्म फील्ड्स में मान्य डेटा हो:
एक और उदाहरण
आइए CSS स्यूडो क्लासेस का एक और उदाहरण देखें:
<!DOCTYPE html> <html> <head> <title>CSS Pseudo Class</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } a { text-decoration: none; background:grey; color: white; border-radius: 3px; padding: 6px; } input[type="button"] { border-radius: 10px; } :target { border:4px solid black; margin: 0 auto; height: 200px; width: 200px; background-image: url('https://www.tutorialspoint.com/arangodb/images/arangodb-mini-logo.jpg'); } #circle { border-radius: 50%; } </style> </head> <body> <form> <fieldset> <legend>CSS Pseudo Class</legend> <div> <div id="circle"></div> <div id="square"></div> </div> <div> <a href="#square">Tile</a> <a href="#circle">Avatar</a> </div> </fieldset> </form> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देगा:
किसी बटन पर क्लिक करने से पहले:
'Tile' बटन पर क्लिक करने के बाद:
'Avatar' बटन पर क्लिक करने के बाद:
