Prioriteti i selektorëve të pasardhësve në CSS

Në të gjitha mësimet e mëparshme, të gjithë selektorët duhej të kapnin vetë elementin. Mund të ndodhë që një selektor të kapë elementin, ndërsa një selektor tjetër të kapë prindin e atij elementi.

Ju tashmë e dini se nëse prindit i është caktuar, për shembull, ngjyra, atëherë kjo ngjyrë do të trashëgohet nga pasardhësi. Por, nëse pasardhësi ka gjithashtu një ngjyrë të caktuar, atëherë selektori i pasardhësit do të ketë prioritet më të lartë se selektori i prindit.

Kjo do të thotë që selektori i etiketës së pasardhësit fiton klasën e prindit:

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

css.block {
  color: red;
}
p {
  color: green; /* do të aplikohet kjo ngjyrë */
}

Результат:

Selektori i etiketës së pasardhësit gjithashtu fiton identifikuesin e prindit:

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

css#block {
  color: red;
}
.text {
  color: green; /* do të aplikohet kjo ngjyrë */
}

Результат: