CSS Pseudo-classes क्या हैं?
CSS में, सेलेक्टर्स का उपयोग उन एलिमेंट्स को चुनने के लिए किया जाता है जिन पर स्टाइल या स्टाइल्स का एक सेट लागू किया जाना चाहिए। उदाहरण के लिए, एक सेलेक्टर वेब पेज पर सभी <h1> या <select> टैग्स को चुन सकता है, जिन पर फिर स्टाइल्स का एक सेट लागू किया जाएगा।
अक्सर, जब आप वेबसाइट स्टाइल कर रहे होते हैं, तो आप केवल तब स्टाइल लागू करना चाहते हैं जब कोई एलिमेंट एक विशेष स्थिति में प्रवेश कर चुका हो, जैसे यूज़र द्वारा क्लिक किया जाना या माउस ओवर होना। यहीं पर पस्यूडो-क्लासेस (pseudo-classes) काम आती हैं।
पस्यूडो-क्लासेस सेलेक्टर में जोड़े गए कीवर्ड होते हैं जो आपको किसी विशेष एलिमेंट को तब चुनने की अनुमति देते हैं जब वह एलिमेंट एक निश्चित स्थिति में मौजूद हो। इस ट्यूटोरियल के लिए, हम :active पस्यूडो-क्लास पर ध्यान केंद्रित करेंगे।
CSS :active Pseudo-class
:active पस्यूडो-क्लास आपको उस एलिमेंट को चुनने की अनुमति देती है जिसे यूज़र द्वारा एक्टिवेट किया जा रहा हो। CSS के संदर्भ में, "एक्टिवेट करना" का अर्थ है जब यूज़र माउस बटन को दबाता है और एलिमेंट पर क्लिक करता है।
:active पस्यूडो-क्लास आमतौर पर <a> और <button> एलिमेंट्स के साथ उपयोग की जाती है। उदाहरण के लिए, आप क्लिक किए जाने पर लिंक का रंग लाल करने के लिए, या क्लिक किए जाने पर बटन का बैकग्राउंड रंग हल्का नीला करने के लिए :active पस्यूडो-क्लास का उपयोग कर सकते हैं।
एक बार जब यूज़र किसी एलिमेंट पर क्लिक करना बंद कर देता है, तो वह एलिमेंट अब "एक्टिवेटेड" नहीं रहेगा। इसलिए, जब यूज़र किसी एलिमेंट पर क्लिक करना बंद कर देता है, तो वह एलिमेंट :active सेलेक्टर द्वारा चुना नहीं जाएगा।
CSS :active उदाहरण
आइए दो उदाहरणों के माध्यम से देखें कि आप अपने कोड में :active पस्यूडो-क्लास का उपयोग कैसे कर सकते हैं।
एक्टिव लिंक्स (Active Links)
मान लीजिए हम एक स्थानीय कार्ड गेम क्लब "Wizards of the Boards" के लिए वेबसाइट डिज़ाइन कर रहे हैं। हमें एक "About" पेज बनाने का काम सौंपा गया है जिसमें क्लब के सदस्यों द्वारा खेले जाने वाले कार्ड गेम्स को सूचीबद्ध करने वाले वेब पेज का लिंक शामिल हो।
डिफ़ॉल्ट रूप से, यह लिंक हल्के नीले रंग में दिखाई देना चाहिए। जब इस लिंक पर क्लिक किया जाता है, तो इसका टेक्स्ट रंग नारंगी में बदल जाना चाहिए। इस कार्य को पूरा करने के लिए, हम :active पस्यूडो-क्लास का उपयोग कर सकते हैं। यहां वह कोड है जिसका उपयोग हम लिंक पर क्लिक होने पर टेक्स्ट का रंग बदलने के लिए करेंगे:
<html>
<p>
Wizards of the Boards फिलाडेल्फिया, PA-आधारित कार्ड गेम क्लब है।
क्लब, जिसकी स्थापना माइकल जॉनसन और गैब्रिएला पटेल ने 2004 में की थी,
सभी कार्ड गेम्स के खिलाड़ियों का स्वागत करता है।
क्लब सप्ताह में दो बार, सोमवार और शुक्रवार को मिलता है...
हमारे सदस्यों द्वारा खेले जाने वाले खेलों के बारे में अधिक जानने के लिए,
<a href="/games.html">यहां क्लिक करें</a>।
</p>
</html>
<style>
a { color: lightblue; }
a:active { color: orange; }
</style>
कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।
हमारे HTML कोड में, हमने <p> टैग्स का उपयोग करके टेक्स्ट का एक पैराग्राफ परिभाषित किया है जो Wizards of the Boards कार्ड गेम क्लब के इतिहास की रूपरेखा देता है। हमारे <p> टैग में, हमने एक <a> टैग निर्दिष्ट किया है जो "games.html" पेज से लिंक करता है, और जब यूज़र "यहां क्लिक करें" टेक्स्ट पर क्लिक करता है तो ट्रिगर होता है।
हमारे CSS कोड में, हमने दो स्टाइल रूल्स निर्दिष्ट किए हैं। पहला, हमने एक नियम निर्दिष्ट किया है जो सभी <a> टैग्स के टेक्स्ट रंग को हल्का नीला सेट करता है। फिर, हमने :active सेलेक्टर का उपयोग करके एक नियम निर्दिष्ट किया जो सभी एक्टिव <a> टैग्स के टेक्स्ट रंग को नारंगी सेट करता है। दूसरे शब्दों में, यह नियम लिंक का रंग बदलता है जब यूज़र उस पर क्लिक कर रहा होता है।
एक्टिव बटन्स (Active Buttons)
हम Wizards of the Boards कार्ड गेम क्लब के लिए एक फॉर्म पर काम कर रहे हैं जो लोगों को क्लब में अपनी रुचि जमा करने की अनुमति देता है।
हमारे फॉर्म के अंत में, हम एक बटन बनाना चाहते हैं जिस पर "Submit Your Interest" लिखा हो। जब इस बटन पर क्लिक किया जाता है, तो बटन के चारों ओर 3px चौड़ा नारंगी बॉर्डर लागू होना चाहिए।
हम निम्न कोड का उपयोग करके यह बटन बना सकते हैं:
<html>
<button>Submit Your Interest</button>
</html>
<style>
button:active { border: 3px solid orange; }
</style>कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।
आइए हमारे कोड को तोड़कर देखें। हमारे HTML कोड में, हमने <button> टैग का उपयोग करके एक बटन परिभाषित किया है। इस बटन में "Submit Your Interest" टेक्स्ट है।
हमारी CSS स्टाइलशीट में, हमने एक नियम परिभाषित किया है जो <button> टैग पर लागू होता है जब इसे यूज़र द्वारा एक्टिव किया जाता है। यह नियम हमारे बटन के चारों ओर 3px चौड़ा सॉलिड बॉर्डर बनाता है। हम इस नियम को केवल तब लागू करने के लिए :active सेलेक्टर का उपयोग करते हैं जब बटन एक्टिव हो।
इसलिए, यदि हम अपने बटन पर क्लिक करते हैं, तो एक नारंगी बॉर्डर दिखाई देगा, और जैसे ही हम बटन पर क्लिक करना बंद करते हैं, बॉर्डर गायब हो जाएगा।
निष्कर्ष
CSS :active पस्यूडो-क्लास आपको किसी एलिमेंट को तब चुनने की अनुमति देती है जब वह अपनी "एक्टिव" स्थिति में हो। एक बार जब आप एक एक्टिव एलिमेंट चुन लेते हैं, तो आप उस एलिमेंट पर स्टाइल या स्टाइल्स का एक सेट लागू कर सकते हैं।
:active पस्यूडो-क्लास आमतौर पर <a> टैग्स और <button> टैग्स के साथ उपयोग की जाती है ताकि ऐसे प्रभाव बनाए जा सकें जो तब ट्रिगर होते हैं जब कोई लिंक या बटन क्लिक किया जाता है।
इस ट्यूटोरियल में CSS पस्यूडो-क्लासेस की बुनियादी बातों और :active पस्यूडो-क्लास का उपयोग कैसे करें, इस पर चर्चा की गई। अब आप :active पस्यूडो-क्लास का उपयोग एक एक्सपर्ट की तरह शुरू करने के लिए ज्ञान से लैस हैं।
