SkillByAIइंटरैक्टिव संस्करण खोलें →

पाठ 22 / 30

स्पेसिफिसिटी

जानें कि inline styles से ids, classes और tags तक specificity कैसे तय करती है कि कौन-सा टकराता rule जीतेगा।

स्पेसिफिसिटी का क्रम

सबसे मज़बूत से सबसे कमज़ोर: इनलाइन स्टाइल, फिर id सेलेक्टर, फिर class/attribute/pseudo-class सेलेक्टर, फिर element/pseudo-element सेलेक्टर। फ़ाइल में क्रम चाहे जो हो, ज़्यादा विशिष्ट जीतता है।

कौन जीतता है?

#title रूल जीतता है भले ही वह पहले लिखा गया हो — id, class को हराता है।

#title { color: red; }      /* specificity: 1 id */
.heading { color: blue; }   /* specificity: 1 class */
/* result: text is red */

त्वरित जाँच: एक ही एलिमेंट पर क्लास सेलेक्टर और id सेलेक्टर में से कौन जीतता है?

  • जो बाद में लिखा गया हो
  • id सेलेक्टर
  • क्लास सेलेक्टर
  • जो पहले declare हुआ
Answer

id सेलेक्टर — स्रोत क्रम चाहे जो हो, id सेलेक्टर की स्पेसिफिसिटी क्लास सेलेक्टर से ज़्यादा होती है।