CSS स्यूडो-क्लास
टैग, class, id और attribute सिलेक्टर आप पहले से जानते हैं। एक परत बाकी है: कभी हमेशा वही रूप नहीं चाहिए; चाहिए कि माउस बटन पर हो तो रूप बदले, या Tab से फ़ील्ड में आएँ, या लिंक पहले खुल चुका हो। इसके लिए स्यूडो-क्लास है — HTML में नई class के बिना।
स्यूडो-क्लास का मतलब क्या?
स्यूडो-क्लास एक शब्द है जो सिलेक्टर से एक कोलन (:) से जुड़ता है। HTML में class="hover" जैसा कुछ नहीं दिखता। ब्राउज़र तब नियम चालू करता है जब शर्त सही हो: पॉइंटर ऊपर, फ़ोकस, लिंक इतिहास, या पैरेंट के बच्चों में जगह।
आम स्यूडो-क्लास
पहले इन्हीं से शुरू करें। और नाम हैं, पर UI की शुरुआत के लिए अक्सर काफी हैं।
📊 रोज़मर्रा की CSS स्यूडो-क्लास
| स्यूडो-क्लास | कब सक्रिय | उदाहरण |
|---|---|---|
:hover |
पॉइंटर तत्व पर है | a:hover |
:focus |
तत्व पर फ़ोकस है (कीबोर्ड या क्लिक) | input:focus |
:visited |
लिंक पहले देखा जा चुका (प्राइवेसी सीमाओं के साथ) | a:visited |
:first-child |
तत्व अपने पैरेंट का पहला बच्चा है | li:first-child |
:nth-child(n) |
nवाँ बच्चा, या विषम/सम | tr:nth-child(odd) |
:disabled |
फ़ॉर्म नियंत्रण बंद है | button:disabled |
होवर — :hover
:hover से रूप तब बदलता है जब पॉइंटर तत्व पर हो। बटन और लिंक छोटे बदलाव से जीवंत लगते हैं — लेआउट कूद के बिना।
होवर — बटन फ़ीडबैक
cssbutton:hover {
background-color: #0f766e;
color: #fff;
}होवर की बात
बदलाव हल्का रखें। टच पर असली होवर कम होता है; ज़रूरी जानकारी सिर्फ :hover में न डालें।
फ़ोकस — :focus
:focus अभी सक्रिय तत्व लेता है — जैसे Tab से पहुँचे हों। साफ़ फ़ोकस रिंग न हो तो कीबोर्ड यूज़र फ़ॉर्म में खो जाता है।
फ़ोकस — input पर साफ़ रिंग
cssinput:focus {
outline: 2px solid #0f766e;
outline-offset: 2px;
}होवर और फ़ोकस दोनों चाहिए
होवर पॉइंटर के लिए। फ़ोकस मतलब «अभी यह नियंत्रण सक्रिय है»। outline हटाएँ तो समान स्पष्ट विकल्प दें।
देखे गए लिंक — :visited
:visited उन लिंक को रंगता है जिन्हें ब्राउज़र पहले खोला मानता है। अक्सर सिर्फ रंग (और थोड़ी सीमा)। padding या लेआउट पर भरोसा न करें — प्राइवेसी रोकती है।
विज़िटेड — हल्का लिंक रंग
cssa:visited {
color: #6b21a8;
}लिंक स्थितियों का क्रम
कई स्थितियाँ साथ लिखें तो सुरक्षित आम क्रम: link → visited → hover → focus (कभी LVHA)। इससे विज़िटेड लिंक पर भी होवर/फ़ोकस दिखते रहते हैं।
पहला बच्चा — :first-child
:first-child मतलब तत्व अपने पैरेंट का पहला बच्चा है — «पूरे पेज का पहला li» नहीं, बल्कि उसी पैरेंट के भाई-बहनों में पहला।
पहला बच्चा — सूची का पहला आइटम मोटा
cssli:first-child {
font-weight: 700;
}अगला कदम: :nth-child
:nth-child(odd) या :nth-child(3) से धारियाँ या «हर तीसरा»। पहले :first-child पक्का करें, फिर ये पैटर्न।
अच्छी आदतें
- स्यूडो-क्लास = एक कोलन (
:hover); स्यूडो-एलिमेंट = दो (::) — अगला सत्र - इंटरैक्टिव होवर के साथ हमेशा साफ़
:focus - visited रंग हल्के रखें
- माउस के साथ Tab से भी जाँचें
खुद आज़माएँ
- छोटी पेज:
<button>,<input>, कुछ लिंक, तीन<li>वाली<ul>। button:hover { background-color: #0f766e; color: #fff; }लगाएँ और माउस बटन पर ले जाएँ।input:focus { outline: 2px solid #0f766e; }जोड़ें और Tab से फ़ील्ड में जाएँ।a:visited { color: #6b21a8; }लगाएँ, लिंक खोलें और वापस आएँ।li:first-child { font-weight: 700; }— सिर्फ पहला आइटम मोटा।
आम गलतियाँ
:hoverकी जगह::hover— दो कोलन स्यूडो-एलिमेंट के लिए- होवर स्टाइल करके फ़ोकस outline बिना बदले हटाना
:visitedसे हर प्रॉपर्टी पर पूरी आज़ादी मानना- सोचना
p:first-child= «पेज कहीं भी पहला पैराग्राफ़» - ज़रूरी टेक्स्ट सिर्फ
:hoverमें रखना ताकि टच यूज़र न देखे
सार
- स्यूडो-क्लास एक कोलन से स्थिति या जगह चुनती है
:hoverऔर:focusफ़ीडबैक देते हैं; दोनों रखें:visitedखुले लिंक को ब्राउज़र सीमा में रंगता है:first-childपहला बच्चा;:nth-childअगला कदम- एक कोलन = स्यूडो-क्लास; दो = स्यूडो-एलिमेंट
- माउस, Tab और छोटी सूची से अभ्यास करें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी