CodeX Cider Logo
CodeX Cider
CSS टॉपिक्स
🎨 CSS Design✨पाठ 4 / 16

Pseudo-classes & Elements

इंटरैक्टिव स्थितियां (:hover, :focus, :active, :nth-child) और बिना अतिरिक्त HTML के आभासी तत्व (::before, ::after) बनाना सीखें।

⏱️~5 मिनट पढ़ाई🟢शुरुआती लेवल⚡लाइव एडिटर पर जाएँ

इस पाठ में आप क्या सीखेंगे

  1. 01Pseudo-classes: यूज़र एक्शन पर स्टाइल बदलना (:hover, :focus)
  2. 02टेबल्स में ज़ेबरा स्ट्राइपिंग: :nth-child(even) का जादू
  3. 03Pseudo-elements: बिना HTML छुए नए तत्व बनाना (::before, ::after)
  4. 04जादुई 'content:' प्रॉपर्टी के बिना एलिमेंट क्यों नहीं दिखता
  5. 05सिंगल कोलन (:) और डबल कोलन (::) में क्या फ़र्क है
Pseudo-Class (सिंगल कोलन :)स्थिति / State
button:hover { background: purple; }

पहले से मौजूद एलिमेंट को केवल तभी चुनता है जब वह किसी खास स्थिति (जैसे माउस ऊपर होना, क्लिक होना या फोकस) में हो।

Pseudo-Element (डबल कोलन ::)अदृश्य क्लोन (Phantom)
.card::before { content: "★"; }

बिना कोई अतिरिक्त HTML टैग जोड़े, एलिमेंट के आगे या पीछे एक नकली सजावटी टुकड़ा पैदा कर देता है!

  1. 1

    गिरगिट जैसा असर: Pseudo-classes से इंटरैक्शन सजाना

    असली दुनिया में कोई बटन मरा हुआ गत्ता नहीं होता। जब आप माउस उसके ऊपर ले जाते हैं तो वह चमकता है; जब दबाते हैं तो अंदर धंसता है; जब कीबोर्ड से टैब दबाते हैं तो नीली रोशनी आती है।

    CSS में इसे Pseudo-classes (सिंगल कोलन :) से संभालते हैं। ये एलिमेंट की तात्कालिक स्थिति पर नियम लगाते हैं:

    • :hover: जब माउस कर्सर एलिमेंट के ऊपर आए।
    • :active: ठीक उस क्षण जब माउस क्लिक या टच दबाया हुआ हो।
    • :focus: जब इनपुट बॉक्स पर क्लिक हो या कीबोर्ड टैब से वह चुना जाए।
    • :nth-child(even): टेबल की हर दूसरी पंक्ति को अपने आप अलग रंग देना!
  2. 2

    अदृश्य क्लोन: ::before और ::after से नया कंटेंट बनाना

    अक्सर हमें हेडिंग के आगे एक सितारा लगाना होता है या बटन के पीछे एक तीर। इसके लिए HTML में खाली <span></span> टैग्स जोड़ना कोड को गंदा करता है।

    CSS इसका जादुई हल देती है: Pseudo-elements (डबल कोलन ::)। ::before एलिमेंट के सबसे आगे एक आभासी बच्चा जोड़ता है, और ::after सबसे पीछे।

  3. 3

    सुनहरा नियम: content प्रॉपर्टी के बिना कुछ नहीं दिखेगा

    अगर आप ::before या ::after लिख रहे हैं, तो content: ""; लिखना 100% अनिवार्य है!

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

  4. 4

    आज की प्रैक्टिस: लाइव इंटरैक्टिव बटन और ऑटो-बैज

    नीचे दिए गए कोड को देखें और दाईं ओर बटन पर माउस ले जाकर देखें। ध्यान दें कि कैसे ★ और (NEW) बैज बिना किसी अतिरिक्त HTML के सिर्फ CSS से जोड़े गए हैं!

  5. 5

    मानक परंपरा: सिंगल कोलन बनाम डबल कोलन

    मॉडर्न CSS3 में स्थिति (State) के लिए सिंगल कोलन (:hover) और आभासी तत्वों के लिए हमेशा डबल कोलन (::before, ::after) का उपयोग किया जाता है।

Interactive Live Editor
styles.css
Click & type to editHTML5
लाइव डेमो

लाइन-बाय-लाइन विश्लेषण

  1. .btn:hover { background-color: #4338ca; }

    Pseudo-class। जैसे ही यूज़र का माउस बटन पर आएगा, इसका बैकग्राउंड रंग गहरा इंडिगो हो जाएगा।

  2. .btn:active { transform: translateY(0); }

    Pseudo-class। क्लिक दबाते ही बटन वापस अपनी जगह पर आ जाएगा, जिससे असली क्लिक का अहसास होता है।

  3. .pro-badge::before { content: "★ "; }

    Pseudo-element। टेक्स्ट से ठीक पहले एक पीला सितारा जोड़ता है बिना किसी स्पैन टैग के।

  4. .pro-badge::after { content: " (NEW)"; }

    Pseudo-element। टेक्स्ट के ठीक बाद में हरे रंग का (NEW) बैज जोड़ता है।

खुद ट्राई करो

एक लिंक बनाओ .custom-link जो :hover करने पर लाल हो जाए, और ::after के ज़रिए उसके अंत में तीर का निशान → जुड़ जाए।

हिंट: ::after ब्लॉक के अंदर content: " →"; लिखना न भूलें!

💡 समाधान देखें (यदि अटक गए हों)
.custom-link {
  color: #4f46e5;
  text-decoration: none;
  font-weight: bold;
}

.custom-link:hover {
  color: #ef4444;
}

.custom-link::after {
  content: " →";
  transition: transform 0.2s ease;
}
त्वरित ज्ञान जाँच

अगर आप ::before या ::after में 'content' प्रॉपर्टी लिखना भूल जाते हैं, तो क्या होगा?

गलती कहाँ होती है

  • 1.::before या ::after में content लिखना भूल जाना। इसके बिना तत्व अदृश्य रहता है।
  • 2.<img> या <input> जैसे void टैग्स पर ::before लगाना (इनके अंदर कोई संतान नहीं हो सकती)।
  • 3.:focus (इनपुट चयन) और :active (क्लिक दबाकर रखना) में भ्रमित होना।

इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)

Q: Pseudo-class और Pseudo-element में क्या फ़र्क है?▼

Pseudo-class (जैसे :hover) पहले से मौजूद तत्व की खास स्थिति पर काम करती है। जबकि Pseudo-element (जैसे ::before, ::after) एक आभासी नया तत्व बनाता है जो HTML कोड में मौजूद नहीं होता।

Q: क्या <img> या <input> पर ::before लगाया जा सकता है?▼

बिल्कुल नहीं! ::before और ::after तत्व के अंदर पहली या आखिरी संतान बनते हैं। <img> और <input> वॉइड (Void) टैग्स हैं जिनका कोई क्लोजिंग टैग या अंदरूनी सामग्री नहीं होती, इसलिए इन पर ये काम नहीं करते।

Q: टेबल्स में :nth-child(even) का क्या फायदा है?▼

tr:nth-child(even) टेबल की हर दूसरी, चौथी, छठी पंक्ति को चुनता है। इससे बिना HTML में क्लास जोड़े अपने आप 'ज़ेबरा स्ट्राइप्स' (एक लाइन सफ़ेद, एक लाइन हल्की ग्रे) डिज़ाइन बन जाती है, जिससे डेटा पढ़ना आसान होता है।

अगला लेसनColors & Backgrounds