Kanuni za Uthabiti katika CSS

Katika mfano uliopita, wachaguzi wote waliwakuwa sawa na walikuwa na kipaumbele sawa. Hii inamaanisha kuwa sifa iliyoshinda ndiyo ile iliyoandikwa chini zaidi.

Kuna pia hali ambapo kipengele kimoja cha ukurasa kinalingana na wachaguzi kadhaa. Katika kesi hii, kwa migongano ya sifa, atashinda mchaguzi aliye maalum zaidi, yaani mchaguzi wenye usahihi zaidi. Wacha tuzingatie kanuni za uthabiti.

Kanuni ya Kwanza

Darasa humshinda kila mara mchaguzi wa kitambulisho:

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

p {
	color: red;
}
.text {
	color: green; /* rangi hii ndiyo itatumika */
}

Kanuni ya Pili

Kitambulisho humshinda kila mara darasa:

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

.text {
	color: red;
}
#elem {
	color: green; /* rangi hii ndiyo itatumika */
}

Kanuni ya Tatu

Kwa masharti sawa, anashinda yule mchaguzi ambaye ana sehemu zaidi. Kwa mfano, ikiwa tuna wachaguzi wawili wa vitambulisho, atashinda yule ambaye ana vitambulisho vingi zaidi:

<div>
	<p>nakala</p>
</div>

p {
	color: red;
}
div p {
	color: green; /* rangi hii ndiyo itatumika */
}

Ikiwa wachaguzi wawili wa madarasa, atashinda yule ambaye amebainisha madarasa zaidi (ikiwa kuna wachaguzi wa vitambulisho, hawaathiri):

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

.text {
	color: red;
}
.block .text {
	color: green; /* rangi hii ndiyo itatumika */
}