A specifikusság szabályai CSS-ben

Az előző példában mindkét szelektor azonos volt és azonos prioritással rendelkezett. Ez azt jelenti, hogy az a tulajdonság győzött, amelyik alul volt írva.

Vannak olyan helyzetek is, amikor egy oldalelem több szelektornak felel meg. Ebben az esetben, ha tulajdonságok ütköznek, a specifikusabb, azaz a pontosabb szelektor győz. Nézzük meg a specifikusság szabályait.

Első szabály

Az osztály mindig legyőzi az elem szelektort:

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

p {
	color: red;
}
.text {
	color: green; /* ez a szín lesz alkalmazva */
}

Második szabály

Az azonosító mindig legyőzi az osztályt:

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

.text {
	color: red;
}
#elem {
	color: green; /* ez a szín lesz alkalmazva */
}

Harmadik szabály

Egyenlő feltételek mellett az a szelektor győz, amelyiknek több része van. Például, ha két elem szelektorunk van, akkor az győz, amelyikben több elem van:

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

p {
	color: red;
}
div p {
	color: green; /* ez a szín lesz alkalmazva */
}

Ha két osztály szelektor van, akkor az győz, amelyikben több osztály van megadva (ha ott elem szelektorok is vannak, azok nem számítanak):

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

.text {
	color: red;
}
.block .text {
	color: green; /* ez a szín lesz alkalmazva */
}