Pravila specifičnosti u CSS-u

U prethodnom primeru oba selektora su bila identična i imala su isti prioritet. To znači da je pobedilo ono svojstvo koje je napisano niže.

Postoje takođe situacije kada jedan element stranice odgovara više selektora. U ovom slučaju, ukoliko postoji konflikt svojstava, pobediće specifičniji, odnosno precizniji selektor. Hajde da pogledamo pravila specifičnosti.

Prvo pravilo

Klasa uvek pobedjuje selektor taga:

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

cssp {
  color: red;
}
.text {
  color: green; /* primeniće se ova boja */
}

Результат:

Drugo pravilo

Identifikator uvek pobedjuje klasu:

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

css.text {
  color: red;
}
#elem {
  color: green; /* primeniće se ova boja */
}

Результат:

Treće pravilo

Pod jednakim uslovima, pobedjuje onaj selektor koji ima više delova. Na primer, ako imamo dva selektora taga, pobediće onaj koji ima više tagova:

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

cssp {
  color: red;
}
div p {
  color: green; /* primeniće se ova boja */
}

Результат:

Ako su dva selektora klasa, pobediće onaj koji ima navedeno više klasa (ukoliko tu imaju selektori tagova, oni ne utiču):

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

css.text {
  color: red;
}
.block .text {
  color: green; /* primeniće se ova boja */
}

Результат: