Rregullat e Specifitetit në CSS

Në shembullin e mëparshëm, të dy përzgjedhësit ishin të njëjtë dhe kishin të njëjtën përparësi. Kjo do të thotë që vetia që fitonte ishte ajo që ishte shkruar më poshtë.

Ka gjithashtu situata kur një element i faqes i përgjigjet disa përzgjedhësve. Në këtë rast, në rast konflikti të vetive, do të fitojë përzgjedhësi më specifik, pra ai më i saktë. Le të shqyrtojmë rregullat e specifitetit.

Rregulla e parë

Klasa gjithmonë e mposht përzgjedhësin e tipit:

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

cssp {
  color: red;
}
.text {
  color: green; /* do të aplikohet ky ngjyrë */
}

Результат:

Rregulla e dytë

Identifikuesi gjithmonë e mposht klasën:

html<p id="elem" class="text">text</p>

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

Результат:

Rregulla e tretë

Në kushte të barabarta, fiton ai përzgjedhës që ka më shumë pjesë. Për shembull, nëse kemi dy përzgjedhës tipash, do të fitojë ai që ka më shumë tipa:

html<div>
  <p>text</p>
</div>

cssp {
  color: red;
}
div p {
  color: green; /* do të aplikohet ky ngjyrë */
}

Результат:

Nëse janë dy përzgjedhës klasash, do të fitojë ai në të cilin janë specifikuar më shumë klasa (nëse aty ka përzgjedhës tipash, ata nuk ndikojnë):

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

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

Результат: