Specificiteitsregels in CSS

In het vorige voorbeeld waren beide selectors hetzelfde en hadden ze dezelfde prioriteit. Dit betekent dat de eigenschap die onderaan stond won.

Er zijn ook situaties waarin meerdere selectors op een pagina-element van toepassing zijn. In dat geval wint, bij conflicterende eigenschappen, de meer specifieke, dat wil zeggen de meer precieze selector. Laten we de specificiteitsregels bekijken.

Eerste regel

Een klasse wint altijd van een tag-selector:

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

cssp {
  color: red;
}
.text {
  color: green; /* deze kleur wordt toegepast */
}

Результат:

Tweede regel

Een identificatie wint altijd van een klasse:

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

css.text {
  color: red;
}
#elem {
  color: green; /* deze kleur wordt toegepast */
}

Результат:

Derde regel

Bij gelijke voorwaarden wint de selector die meer onderdelen heeft. Bijvoorbeeld, als we twee tag-selectors hebben, wint degene met meer tags:

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

cssp {
  color: red;
}
div p {
  color: green; /* deze kleur wordt toegepast */
}

Результат:

Als er twee klasse-selectors zijn, wint degene waarin meer klassen zijn gespecificeerd (als daar tag-selectors zijn, hebben deze geen invloed):

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

css.text {
  color: red;
}
.block .text {
  color: green; /* deze kleur wordt toegepast */
}

Результат: