Selectors
आज हम चुनते हैं किसे सजाना है — हर tag के लिए type selector, reusable ग्रुप के लिए class, और एक unique element के लिए id।
इस पाठ में आप क्या सीखेंगे
- 01Type selectors उस नाम के सभी टैग्स चुनते हैं
- 02Class selectors (.name) से ग्रुप्स को दोबारा स्टाइल करते हैं
- 03ID selectors (#name) से एक खास यूनिक एलिमेंट चुनते हैं
- 04Specificity फॉर्मूला: नियमों की टक्कर में कौन जीतेगा
- 05Combinators: माता-पिता, बच्चे और वंशजों को स्टाइल करना
Type / Element Selector
Class Selector (क्लास)
ID Selector (आईडी)
सब कुछ तोड़कर जीतता है (बचें!)
- 1
स्कूल का रोल कॉल: Element, Class और ID में अंतर
कक्षा में अगर टीचर आवाज़ दे "छात्रों!", तो सब मुड़कर देखते हैं। यह Type Selector है (
p,h1,button)।अगर टीचर कहे "क्रिकेट टीम!", तो सिर्फ़ वही बच्चे खड़े होंगे जिनके पास वह बैच है। यह Class Selector है (
.badge,.btn-primary)।अगर टीचर किसी छात्र का रोल नंबर या आधार नंबर बुलाए, तो पूरी क्लास में केवल एक ही बच्चा बोलेगा। यह ID Selector है (
#user-profile)। - 2
Specificity की जंग: जब नियमों में टकराव हो तो कौन जीतेगा?
अगर एक ही पैराग्राफ पर तीन नियम लग रहे हों—
pकह रहा है नीला,.alertकह रहा है हरा, और#heroकह रहा है लाल। तो स्क्रीन पर क्या दिखेगा?CSS इसके लिए Specificity (विशिष्टता) का गणित लगाता है। ID हमेशा Class से जीतती है, और Class हमेशा Type से जीतती है। इसलिए वह पैराग्राफ लाल रंग का दिखेगा।
- 3
Descendant और Child Combinators का जादू
आप सेलेक्टर्स को आपस में जोड़कर गहराई से टारगेट कर सकते हैं:
nav a: किसी भी<nav>के अंदर बैठा कोई भी लिंक (Descendant)।ul > li: केवल सीधे<ul>के अंदर वाले<li>(Direct Child)।h1, p: कॉमा लगाकर दोनों को एक साथ एक ही स्टाइल दे सकते हैं।
- 4
आज की प्रैक्टिस: Class और ID से स्टाइलिंग
नीचे दिए गए कोड में देखें कि कैसे
.alertक्लास एक चेतावनी बॉक्स बनाती है, जबकि#heroबैनर को खास बड़ा रूप देता है। - 5
बेस्ट प्रैक्टिस: 95% स्टाइलिंग के लिए Classes का ही उपयोग करें
पेशेवर डेवलपर्स CSS में लगभग हर काम Class से करते हैं। ID का उपयोग केवल JavaScript या एंकर लिंक्स के लिए रखना बेहतर है, ताकि Specificity का सिरदर्द न बने।
लाइन-बाय-लाइन विश्लेषण
p { color: #475569; }Type सेलेक्टर। यह पेज के हर पैराग्राफ को बुनियादी रंग देता है। इसकी Specificity सबसे कम होती है।
.alert { background: #fef2f2; }Class सेलेक्टर (डॉट
.से शुरू होता है)। जिस भी एलिमेंट परclass="alert"होगा, उस पर लागू होगा।#hero { font-size: 32px; }ID सेलेक्टर (हैश
#से शुरू होता है)। केवलid="hero"वाले अद्वितीय तत्व को स्टाइल करता है। तीनों में सबसे मजबूत।
खुद ट्राई करो
एक क्लास सेलेक्टर .badge लिखो जो बैकग्राउंड रंग #4f46e5 और टेक्स्ट का रंग सफ़ेद करे। फिर एक आईडी नियम #special लिखो जो फॉन्ट को बोल्ड बनाए।
हिंट: CSS में क्लास के आगे . और आईडी के आगे # लगाया जाता है।
💡 समाधान देखें (यदि अटक गए हों)
/* 1. Class Selector */
.badge {
background-color: #4f46e5;
color: #ffffff;
padding: 4px 12px;
border-radius: 9999px;
}
/* 2. ID Selector */
#special {
font-weight: bold;
}अगर किसी पैराग्राफ पर <p id='intro' class='text'> लिखा हो, और CSS में p { color: blue; }, .text { color: green; }, और #intro { color: red; } हो, तो टेक्स्ट किस रंग का दिखेगा?
गलती कहाँ होती है
- 1.HTML के अंदर ही डॉट या हैश लिख देना:
class=".lead"लिखना गलत है, हमेशाclass="lead"लिखें। - 2.एक ही पेज पर एक जैसी ID कई तत्वों पर लगा देना (ID हमेशा पूरे पेज पर अद्वितीय होनी चाहिए)।
- 3.हर जगह ID का उपयोग करना, जिससे बाद में अन्य स्टाइल लगाना कठिन हो जाता है।
इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)
Q: CSS Specificity की गणना कैसे की जाती है?▼
Specificity को 3 अंकों के स्कोर (a, b, c) में मापा जाता है:
- a: ID सेलेक्टर्स की संख्या (जैसे #nav)
- b: Class, Pseudo-class, और एट्रिब्यूट सेलेक्टर्स की संख्या (जैसे .btn, :hover)
- c: Element टैग्स की संख्या (जैसे p, div)
इनलाइन स्टाइल सबसे ऊपर (1, 0, 0, 0) पर होती है।
Q: CSS में Class और ID में क्या अंतर है?▼
एक Class को पेज के कई तत्वों पर बार-बार लगाया जा सकता है, जबकि ID पूरे पेज पर केवल एक ही तत्व के लिए अद्वितीय होनी चाहिए। CSS में Class . से और ID # से शुरू होती है।
Q: !important का अत्यधिक उपयोग खराब क्यों माना जाता है?▼
!important प्राकृतिक Specificity सीढ़ी को तोड़ देता है। बाद में उसे ओवरराइड करने के लिए एक और !important लगाना पड़ता है, जिससे कोड को भविष्य में संभालना असंभव हो जाता है।