CSS :focus - एक हाउ-टू गाइड

CSS :focus स्यूडो-क्लास अपने फोकस स्टेट में एक एलिमेंट को सेलेक्ट करता। यह तब होता है जब आप किसी एलिमेंट पर क्लिक करते हैं या टैब बटन से इसे सेलेक्ट करते हैं। :focus उस एलिमेंट के नाम के बाद आता है जिसे आप सेलेक्ट करना चाहते हैं।

आप किसी एलिमेंट पर स्टाइल केवल तब लागू करना चाह सकते हैं जब उस पर वेब पेज पर फोकस हो। उदाहरण के लिए, आप एक फॉर्म फील्ड पर बॉर्डर लागू करना चाह सकते हैं जब यूज़र फॉर्म फील्ड पर क्लिक करता है।

यहीं CSS :focus स्यूडो-क्लास काम आता है। :focus स्यूडो-क्लास एक स्टाइल लागू करता है जब यूज़र किसी एलिमेंट पर क्लिक करता है या टैब कीबोर्ड बटन का उपयोग करके एलिमेंट को सेलेक्ट करता है।

यह ट्यूटोरियल एक उदाहरण के साथ, CSS :focus स्यूडो-क्लास की मूल बातें और इसे अपने कोड में कैसे उपयोग करें, पर चर्चा करेगा। इस ट्यूटोरियल को पढ़ने के अंत तक, आप फोकस में एलिमेंट्स पर स्टाइल लागू करने के लिए :focus स्यूडो-क्लास का उपयोग करने में एक्सपर्ट होंगे।

CSS स्यूडो-क्लासेज

एक स्यूडो-क्लास एक कीवर्ड है जिसे CSS सेलेक्टर में जोड़ा जाता है। स्यूडो-क्लास उस स्टेट को निर्दिष्ट करता है जिसमें एक एलिमेंट को स्टाइल लागू करने के लिए प्रकट होना चाहिए। स्यूडो-क्लासेज सेलेक्टर के बाद जोड़े जाते हैं।

स्यूडो-क्लासेज आपको एलिमेंट्स के लिए स्पेशल स्टेट में नियम सेट करने देते हैं, जैसे जब आप किसी एलिमेंट को फोकस देते हैं। इस ट्यूटोरियल के लिए, हम :focus स्यूडो-क्लास पर ध्यान केंद्रित करने जा रहे हैं।

CSS :focus स्यूडो-क्लास

CSS :focus स्यूडो-क्लास एक एलिमेंट पर स्टाइल लागू करता है जब एलिमेंट को वेब पेज पर फोकस मिला हो। यदि यूज़र किसी एलिमेंट पर क्लिक करता है या इसे टैब कुंजी से सेलेक्ट करता है, तो यह एक फोकस्ड एलिमेंट बन जाएगा।

:focus स्यूडो क्लास का सिंटैक्स है:

textarea:focus { border: 1px solid blue; }

यह कोड वेब पेज पर किसी भी HTML <textarea> एलिमेंट्स के चारों ओर एक पिक्सेल चौड़ा सॉलिड ब्लू बॉर्डर सेट करता है। लेकिन, यह नियम केवल तब लागू होता है जब <textarea> एलिमेंट फोकस में हो।

आप देख सकते हैं कि हमारा स्यूडो-क्लास उस एलिमेंट के बाद लागू होता है जिसे हम सेलेक्ट करना चाहते हैं। एक सेलेक्टर्स की सूची में प्रत्येक एलिमेंट के लिए जिसे आप क्लास को लागू करना चाहते हैं, एक :focus स्यूडो-क्लास निर्दिष्ट करना आवश्यक है।

इस सिंटैक्स पर विचार करें:

input, textarea:focus { border: 1px solid blue; }

हमारे कोड में CSS नियम सभी <input> एलिमेंट्स और सभी <textarea> टैग्स पर लागू होता है जब यूज़र टेक्स्ट एरिया पर फोकस करता है। लेकिन, हमारा नियम फोकस में <input> टैग्स पर लागू नहीं होता है।

एक सामान्य परिदृश्य जहां :focus सेलेक्टर का उपयोग किया जाता है वह है वेब फॉर्म्स को स्टाइल करना। उदाहरण के लिए, आप चाह सकते हैं कि जब यूज़र फॉर्म फील्ड पर क्लिक करे तो वेब फॉर्म फील्ड का बैकग्राउंड कलर बदल जाए। या आप चाह सकते हैं कि जब यूज़र फॉर्म फील्ड पर क्लिक करे तो बॉर्डर का कलर बदल जाए।

:focus CSS उदाहरण

हमें एक वेबसाइट के लिए एक वेब फॉर्म फील्ड डिज़ाइन करने के लिए कहा गया है जो यूज़र का पहला नाम एकत्र करता है। जब फॉर्म फील्ड फोकस स्टेट में प्रवेश करता है, तो फॉर्म फील्ड पर एक ऑरेंज बॉर्डर लागू किया जाना चाहिए। इसके अलावा, फॉर्म फील्ड का बैकग्राउंड कलर लाइट ग्रे में बदल जाना चाहिए।

हम इस फॉर्म फील्ड को डिज़ाइन करने के लिए निम्न कोड का उपयोग कर सकते हैं:

<html> <input class="textField" placeholder="First Name"> <style> .textField:focus { background-color: lightgray; border: 2px solid orange; }

ऊपर कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमने textField क्लास नेम के साथ एक HTML <input> फील्ड परिभाषित किया है। यह इनपुट फील्ड प्लेसहोल्डर टेक्स्ट First Name दिखाता है।

जब यूज़र फॉर्म फील्ड को फोकस में ले जाता है, तो हमारे .textField:focus नियम में CSS प्रॉपर्टीज लागू होती हैं। ये स्टाइल्स एक लाइट ग्रे बैकग्राउंड कलर सेट करती हैं और हमारे फॉर्म फील्ड के चारों ओर 2px चौड़ा सॉलिड ऑरेंज CSS बॉर्डर लागू करती हैं।

जब यूज़र फॉर्म फील्ड को फोकस से बाहर ले जाता है, तो ये स्टाइल्स अब लागू नहीं होती हैं।

निष्कर्ष

:focus स्यूडो-क्लास एक स्टाइल लागू करता है जब यूज़र वेब पेज पर एक वेब एलिमेंट को फोकस में ले जाता है। :focus का उपयोग आमतौर पर फॉर्म में फील्ड्स पर स्टाइल लागू करने के लिए किया जाता है जो तब ट्रिगर होते हैं जब यूज़र एक फॉर्म फील्ड को फोकस में ले जाता है।

:focus कई CSS स्यूडो-क्लासेज में से एक है, जैसे :hover। स्यूडो-क्लास का उपयोग करने के लिए, अपने CSS सेलेक्टर के बाद स्यूडो-क्लास का नाम निर्दिष्ट करें।

क्या आप CSS के बारे में अधिक जानने में रुचि रखते हैं? हमारा CSS सीखने का पूरा गाइड देखें एक्सपर्ट सलाह और शीर्ष शिक्षण संसाधनों पर मार्गदर्शन के लिए।