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:

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

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

Rregulla e dytë

Identifikuesi gjithmonë e mposht klasën:

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

.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:

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

p {
	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ë):

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

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