Peraturan Kekhususan dalam CSS

Dalam contoh sebelumnya, kedua-dua pemilih adalah sama dan mempunyai keutamaan yang sama. Ini bermakna, sifat yang menang adalah sifat yang ditulis di bawah.

Terdapat juga situasi di mana beberapa pemilih sepadan dengan satu elemen halaman. Dalam kes ini, jika terdapat konflik sifat, pemilih yang lebih spesifik, iaitu pemilih yang lebih tepat akan menang. Mari kita lihat peraturan kekhususan.

Peraturan pertama

Kelas sentiasa mengalahkan pemilih tag:

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

p {
	color: red;
}
.text {
	color: green; /* warna ini akan diterapkan */
}

Peraturan kedua

Pengenal pasti sentiasa mengalahkan kelas:

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

.text {
	color: red;
}
#elem {
	color: green; /* warna ini akan diterapkan */
}

Peraturan ketiga

Dalam keadaan yang sama, pemilih yang menang adalah pemilih yang mempunyai lebih banyak bahagian. Contohnya, jika kita mempunyai dua pemilih tag, pemilih yang menang ialah pemilih yang mempunyai lebih banyak tag:

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

p {
	color: red;
}
div p {
	color: green; /* warna ini akan diterapkan */
}

Jika terdapat dua pemilih kelas, pemilih yang menang ialah pemilih yang mempunyai lebih banyak kelas dinyatakan (jika terdapat pemilih tag, ia tidak memberi kesan):

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

.text {
	color: red;
}
.block .text {
	color: green; /* warna ini akan diterapkan */
}