लोड हो रहा है...

CSS सिलेक्टर

हर CSS नियम के दो काम होते हैं: किस पर स्टाइल लगानी है, और कैसी लगानी है। “कैसी” का अभ्यास आप property, value और यूनिट के साथ कर चुके हैं। इस सत्र में हम “किस पर” को समझेंगे, यानी नियम की शुरुआत में आने वाले सिलेक्टर को।

CSS सिलेक्टर क्या होते हैं?

सिलेक्टर एक पैटर्न है जिससे ब्राउज़र पहचानता है कि declaration ब्लॉक किन HTML एलिमेंट्स पर लागू करना है। अगर सिलेक्टर पेज के किसी एलिमेंट से मेल खा जाए, तो उस एलिमेंट को { } के अंदर लिखी सारी स्टाइल मिल जाती है।

बुनियादी सिलेक्टर एक नज़र में

शुरुआत इन्हीं चार से करें। combinator, attribute और pseudo-class आगे के सत्रों में आएँगे; पहले एलिमेंट, class, id और * पर पक्की पकड़ बना लें।

📊 बुनियादी CSS सिलेक्टर

सिलेक्टर	किससे मेल खाता है	उदाहरण
एलिमेंट (टाइप)	उस टैग नाम वाले सभी एलिमेंट	`p { … }`
Class	जिन एलिमेंट्स में वह class एट्रिब्यूट है	`.card { … }`
Id	उस यूनिक id वाला एक एलिमेंट	`#hero { … }`
यूनिवर्सल	हर एलिमेंट (सोच-समझकर इस्तेमाल करें)	`* { … }`

एलिमेंट (टाइप) सिलेक्टर

एलिमेंट सिलेक्टर बस टैग का नाम होता है, न कोई डॉट, न हैश। h1 पेज के हर <h1> पर स्टाइल लगाता है और p हर पैराग्राफ़ पर। जब आप किसी टैग के लिए एक जैसा बुनियादी रूप तय करना चाहें, तो रोज़मर्रा का यह सबसे व्यापक औज़ार है।

हेडिंग और पैराग्राफ़ के लिए एलिमेंट सिलेक्टर

css

CSS Code

h1 {
color: #0f766e;
font-size: 2rem;
}

p {
color: #334155;
line-height: 1.6;
}

टाइप सिलेक्टर कब काम आते हैं

इनका इस्तेमाल पूरी साइट के डिफ़ॉल्ट के लिए करें: body के टेक्स्ट का रंग, हेडिंग की मोटाई, लिस्ट की दूरी। अगर सिर्फ़ कुछ पैराग्राफ़ अलग दिखने चाहिए, तो सारे p की स्टाइल बदलने के बजाय class लगाएँ।

Class सिलेक्टर

class सिलेक्टर डॉट (.) से शुरू होता है और उसके बाद class का नाम आता है। HTML में आप एलिमेंट पर class="card" लिखते हैं। एक ही class कई एलिमेंट्स पर लग सकती है, इसीलिए दोबारा इस्तेमाल होने वाले डिज़ाइन की असली रीढ़ class ही है।

दोबारा इस्तेमाल होने वाले कार्ड के लिए class सिलेक्टर

css

CSS Code

.card {
background: #f8fafc;
border: 1px solid #cbd5e1;
padding: 1rem;
border-radius: 8px;
}

HTML में class का नाम हूबहू मिलना चाहिए

CSS का .card सिर्फ़ उन्हीं एलिमेंट्स पर लगेगा जिनमें सचमुच class="card" हो (या कई class हों जिनमें card शामिल हो)। वर्तनी बिल्कुल एक जैसी होनी चाहिए: .Card और .card अलग-अलग हैं।

Id सिलेक्टर

id सिलेक्टर हैश (#) से शुरू होता है और उसके बाद id का नाम आता है। HTML में आप id="hero" लिखते हैं। id पेज पर यूनिक होनी चाहिए, यानी सिर्फ़ एक एलिमेंट की। ज़्यादातर स्टाइलिंग के लिए class चुनें; id को किसी ऐसे एक ख़ास हिस्से के लिए बचाकर रखें जो सच में पेज पर एक ही बार आता है।

यूनिक बैनर के लिए id सिलेक्टर

css

CSS Code

#hero {
min-height: 40vh;
background: #0f172a;
color: #f8fafc;
padding: 2rem;
}

यूनिवर्सल सिलेक्टर (`*`)

यूनिवर्सल सिलेक्टर * हर एलिमेंट से मेल खाता है। कभी-कभी इसे आसान रीसेट के लिए इस्तेमाल किया जाता है (जैसे box-sizing तय करना), लेकिन हर चीज़ पर रंग या margin लगा देने से आपका लेआउट बिगड़ सकता है। रोज़मर्रा के लुक के लिए ज़्यादा सटीक सिलेक्टर चुनें।

सावधानी से इस्तेमाल किया गया यूनिवर्सल सिलेक्टर

css

CSS Code

* {
box-sizing: border-box;
}

एक पेज पर सिलेक्टर साथ में

असली stylesheet में सभी तरह के सिलेक्टर मिले-जुले होते हैं: डिफ़ॉल्ट के लिए एलिमेंट सिलेक्टर, दोबारा इस्तेमाल होने वाले हिस्सों के लिए class, और गिने-चुने यूनिक टारगेट के लिए id। नीचे की छोटी stylesheet यही आदत दिखाती है: हर नियम को id की ज़रूरत नहीं होती।

एक पेज पर सिलेक्टर के प्रकारों का छोटा मिश्रण

css

CSS Code

body {
font-family: Georgia, serif;
margin: 0;
}

.card {
max-width: 28rem;
margin: 1rem;
}

#hero {
padding: 2rem;
}

Class बनाम id: एक व्यावहारिक आदत

बटन, कार्ड, नेविगेशन लिंक और हर उस चीज़ के लिए class चुनें जिसे आप दोबारा इस्तेमाल कर सकते हैं
id तभी लगाएँ जब टारगेट सच में अकेला हो (पेज का एक बैनर, मुख्य सर्च बॉक्स)
हर स्टाइल किए गए बॉक्स के लिए नई id न बनाएँ; इससे दोबारा इस्तेमाल रुकता है और आगे cascade वाले पाठों में उलझन होती है

खुद आज़माएँ

एक अभ्यास पेज पर <h1>, दो <p>, एक <div class="card"> और एक <section id="hero"> जोड़ें।
h1 और p के लिए एलिमेंट नियम लिखें।
.card में padding, हल्की बैकग्राउंड और border लगाएँ।
#hero में गहरी बैकग्राउंड और हल्का टेक्स्ट रंग लगाएँ।
वैकल्पिक: * { box-sizing: border-box; } जोड़ें और देखें कि कार्ड के अंदर padding का व्यवहार ज़्यादा अनुमान-योग्य हो जाता है।

आम गलतियाँ

.card { } लिखना था पर card { } लिख दिया: डॉट के बिना ब्राउज़र card नाम का एलिमेंट ढूँढता है, जो HTML में होता ही नहीं
#hero { } की जगह hero { } लिखना: हैश छूट गया
HTML में class="card" है पर CSS में .crd लिखा: मेल नहीं खाया, इसलिए कोई स्टाइल नहीं लगी
कई एलिमेंट्स को एक ही id देना: HTML अमान्य हो जाता है और टारगेटिंग का नतीजा अनिश्चित रहता है
एक ख़ास डिज़ाइन के लिए सिर्फ़ टाइप सिलेक्टर इस्तेमाल करना: आपको एक ब्लॉक बदलना था, पर पेज का हर p या div बदल जाता है

सारांश

सिलेक्टर तय करते हैं कि नियम की स्टाइल किन HTML एलिमेंट्स को मिलेगी
एलिमेंट सिलेक्टर टैग के नाम से बनता है (h1, p)
class सिलेक्टर डॉट से शुरू होता है (.card) और HTML के class एट्रिब्यूट से मेल खाता है
id सिलेक्टर हैश से शुरू होता है (#hero) और किसी एक यूनिक एलिमेंट को टारगेट करना चाहिए
* सब कुछ चुन लेता है: सोच-समझकर किए गए रीसेट के लिए ठीक है, पूरी सजावट के लिए नहीं
दोबारा इस्तेमाल होने वाले UI के लिए class चुनें; id कम और सिर्फ़ यूनिक चीज़ों के लिए रखें

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा

CSS सिलेक्टर

इस ट्यूटोरियल को साझा करें