CSS स्पेसिफिसिटी
सिलेक्टर लिखना आप जानते हैं। असली stylesheet में नियम टकराते हैं: दो नियम एक ही तत्व और एक ही प्रॉपर्टी पर। ब्राउज़र अटकल नहीं लगाता — स्पेसिफिसिटी देखता है, और वजन बराबर हो तो फ़ाइल में क्रम।
स्पेसिफिसिटी का मतलब क्या?
स्पेसिफिसिटी वह वजन है जो ब्राउज़र सिलेक्टर को देता है। टकराव में उसी प्रॉपर्टी के लिए भारी सिलेक्टर जीतता है। रोज़ के लिए यह सीढ़ी याद रखें: inline style > id > class (और attribute / स्यूडो-क्लास) > element (और स्यूडो-एलिमेंट)। * और कॉम्बिनेटर खुद वजन नहीं बढ़ाते।
रैंकिंग एक नज़र में
पहले यही क्रम सीखें। और विवरण हैं, पर ज़्यादातर शुरुआती उलझनें इसी सीढ़ी से सुलझती हैं।
📊 CSS स्पेसिफिसिटी रैंकिंग (रोज़)
| प्रकार | उदाहरण | आमतौर पर किसे हराता है |
|---|---|---|
| Inline style | style="color: red" |
stylesheet में लगभग सब |
| Id | #hero, #nav |
class और element |
| Class / attribute / स्यूडो-क्लास | .card, [type="email"], :hover |
element सिलेक्टर |
| Element / स्यूडो-एलिमेंट | p, h1, ::before |
सिर्फ कमज़ोर या बराबर नियम (फिर स्रोत क्रम) |
class, element से मजबूत
टैग सिलेक्टर चौड़ा है। class ज़्यादा सटीक — class का रंग जीतता है। क्रम तभी मायने रखता है जब वजन बराबर हों।
class, element पर जीतता है
cssp {
color: #334155;
}
.note {
color: #0f766e;
}टकराव कैसे पढ़ें?
<p class="note"> पर दोनों नियम लगते हैं। .note class है; p element। class जीतता है → teal टेक्स्ट।
id, class से मजबूत
id, class से भारी है। दोबारा इस्तेमाल वाले डिज़ाइन के लिए class चुनें; id अनोखे हुक के लिए रखें।
id, class पर जीतता है
css.note {
color: #0f766e;
}
#title {
color: #9f1239;
}क्यों ज़रूरी?
अगर <h1 id="title" class="note"> मैरून हो जाए, तो id जीता — «महसूस महत्वपूर्ण» होने से नहीं, ज़्यादा वजन से।
बराबर वजन → बाद वाला नियम जीतता है
जब दो नियमों की स्पेसिफिसिटी एक जैसी हो, तो CSS में बाद आने वाला उसी प्रॉपर्टी पर जीतता है।
एक वजन — स्रोत क्रम तय करता है
css.card {
border-color: #cbd5e1;
}
.card {
border-color: #0f766e;
}बराबरी की आदत
दोनों सिलेक्टर एक class हैं। दूसरा .card नियम जीतता है → teal बॉर्डर। पहला रंग चाहिए था तो देखें कहीं मजबूत सिलेक्टर भी तो नहीं लग रहा।
मिलकर सिलेक्टर व्यवहार में
सिलेक्टर जुड़ते हैं: nav a.button:hover अकेले a से मजबूत है क्योंकि class और स्यूडो-क्लास जुड़े। हर पंक्ति पर कैलकुलेटर नहीं — पूछें: «id है? अतिरिक्त class? या सिर्फ टैग?»
मिला सिलेक्टर नंगे element को हराता है
cssa {
color: #334155;
}
nav a.button {
color: #0f766e;
}!important के बारे में
!important सामान्य स्पेसिफिसिटी को काट सकता है। अग्निशामक है, रोज़ का औज़ार नहीं। ज़्यादा इस्तेमाल बाद के बदलाव कठिन बनाता है। पहले संरचना और साफ़ सिलेक्टर ठीक करें।
अच्छी आदतें
- रूप-रंग के लिए class; id अनोखे हुक के लिए
- अटक गए? देखें हर सिलेक्टर सीढ़ी के किस पायदान पर है
- बराबर वजन → फ़ाइल में बाद वाला नियम जाँचें
- सिर्फ «जीत» के लिए लंबी श्रृंखला न बनाएँ — HTML बदलते टूटती हैं
!importantआखिर में, शुरुआत में नहीं
खुद आज़माएँ
- पेज:
<p class="note">नमस्ते</p>,<h1 id="title" class="note">शीर्षक</h1>, और<nav>में<a class="button">जाओ</a>। - element बनाम class (
pस्लेटी,.noteteal) — note पैरा teal हो। #title { color: #9f1239; }जोड़ें —.noteके बावजूद शीर्षक मैरून।- दो
.cardनियमborder-colorके — दूसरा जीते। - वैकल्पिक: nav लिंक पर
a { … }औरnav a.button { … }तुलना करें।
आम गलतियाँ
- सोचना «ज़्यादा declaration» स्पेसिफिसिटी बढ़ाते हैं — नहीं
- मानना आखिरी फ़ाइल हमेशा id हरा देगी — ऊँचा वजन फिर भी जीतता है
#सबकुछया!importantको डिफ़ॉल्ट हल बनाना- सीढ़ी के पायदान मिलाना (class को element जैसा समझना)
- भूलना कि बराबर वजन स्रोत क्रम पर लौटता है
सार
- स्पेसिफिसिटी टकराव में विजेता तय करती है
- रोज़ की सीढ़ी: inline > id > class/attribute/स्यूडो-क्लास > element/स्यूडो-एलिमेंट
- बराबर वजन → बाद वाला नियम
- रूप के लिए class; id और
!importantकम - पहले पायदान, फिर क्रम
p/.note/#titleसे अभ्यास करें जब तक विजेता साफ़ लगे
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी