Spesifisyyssäännöt CSS:ssä

Edellisessä esimerkissä molemmat valitsijat olivat samanlaisia ja niillä oli sama prioriteetti. Tämä tarkoittaa, että voittava ominaisuus oli se, joka kirjoitettiin alimmaiseksi.

On myös tilanteita, jolloin yhdellä sivun elementillä on useita vastaavia valitsijoita. Tässä tapauksessa ristiriitatilanteessa ominaisuudet voittaa spesifisempi, eli tarkempi valitsija. Katsotaanpa spesifisyyssääntöjä.

Sääntö yksi

Luokka voittaa aina elementtivalitsijan:

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

p {
	color: red;
}
.text {
	color: green; /* tämä väri tulee käyttöön */
}

Sääntö kaksi

Tunniste voittaa aina luokan:

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

.text {
	color: red;
}
#elem {
	color: green; /* tämä väri tulee käyttöön */
}

Sääntö kolme

Samanlaisissa olosuhteissa voittaa se valitsija, jolla on enemmän osia. Esimerkiksi, jos meillä on kaksi elementtivalitsijaa, voittaa se, jossa on enemmän elementtejä:

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

p {
	color: red;
}
div p {
	color: green; /* tämä väri tulee käyttöön */
}

Jos on kaksi luokkavalitsijaa, voittaa se, jossa on määritelty enemmän luokkia (jos siellä on elementtivalitsijoita, ne eivät vaikuta):

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

.text {
	color: red;
}
.block .text {
	color: green; /* tämä väri tulee käyttöön */
}