Aturan Spesifisitas dalam CSS

Dalam contoh sebelumnya, kedua selector sama dan memiliki prioritas yang sama. Ini berarti, properti yang menang adalah yang ditulis lebih bawah.

Ada juga situasi di mana satu elemen halaman sesuai dengan beberapa selector. Dalam hal ini, jika terjadi konflik properti, yang menang adalah selector yang lebih spesifik, yaitu selector yang lebih tepat. Mari kita bahas aturan spesifisitas.

Aturan pertama

Kelas selalu mengalahkan selector tag:

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

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

Результат:

Aturan kedua

Identifier selalu mengalahkan kelas:

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

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

Результат:

Aturan ketiga

Dalam kondisi yang setara, yang menang adalah selector yang memiliki lebih banyak bagian. Misalnya, jika kita memiliki dua selector tag, maka yang menang adalah yang memiliki lebih banyak tag:

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

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

Результат:

Jika ada dua selector kelas, maka yang menang adalah yang menetapkan lebih banyak kelas (jika ada selector tag di sana, maka itu tidak berpengaruh):

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

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

Результат: