सीएसएस में डिसेंडेंट सेलेक्टर्स की प्राथमिकता

पिछले सभी पाठों में सभी सेलेक्टर्स को सीधे तत्व को ही पकड़ना होता था। ऐसा भी हो सकता है कि एक सेलेक्टर तत्व को पकड़ता हो, और दूसरा सेलेक्टर उस तत्व के पैरेंट को पकड़ता हो।

आप पहले से ही जानते हैं कि यदि पैरेंट को, उदाहरण के लिए, रंग दिया गया है, तो यह रंग उसके डिसेंडेंट द्वारा इन्हेरिट किया जाएगा। लेकिन, यदि डिसेंडेंट को भी रंग दिया गया है, तो डिसेंडेंट का सेलेक्टर, पैरेंट के सेलेक्टर की तुलना में अधिक प्राथमिकता रखेगा।

इसका मतलब है कि डिसेंडेंट के टैग सेलेक्टर ने पैरेंट की क्लास को हरा दिया:

html<div class="block">
  <p>text</p>
</div>

css.block {
  color: red;
}
p {
  color: green; /* यह रंग लागू होगा */
}

Результат:

डिसेंडेंट के टैग सेलेक्टर ने पैरेंट की आईडी को भी हरा दिया:

html<div id="block">
  <p class="text">text</p>
</div>

css#block {
  color: red;
}
.text {
  color: green; /* यह रंग लागू होगा */
}

Результат: