DesignMagz

Specificity Pada CSS

---

CSS memiliki “sifat” yang dimana ia akan mengambil alih / override property yang sama yang telah di definisikan sebelumnya. Namun CSS memiliki apa yang dinamakan dengan specificity dimana hukum override ini tidak akan selalu berlaku.

perhatikan contoh berikut:

.warna {
color: Red;
}
.warna {
color: Blue;
}

Bila kode idatas diaplikasikan pada sebuah tag html, yang akan muncul adalah sebuah teks dengan warna biru (color: Blue;).

Lalu ubah css diatas menjadi:

p.warna {
color: Red;
}
.warna {
color: Blue;
}

Yang akan muncul kemudian adalah huruf dengan warna merah (color: Red;). Property color: Blue; tidak lagi menimpa fungsi diatasnya, karena p.warna memiliki nilai specificity lebih tinggi dari pada .warna.

Menghitung Specificity

Specificity ditentukan dari selector pada css:
HTML selector (p, div, ul) memiliki nilai specificity 1
Class Selector (.warna) memiliki nilai specificity 10
ID Selector (#warna) memiliki nilai specificity 100

div p (1 dimiliki div, 1 dimiliki p) memiliki nilai specificity 2
div.header (1 dimiliki div, 10 dimiliki .header) memiliki nilai specificity 11
#container .header (100 dimiliki #container, 10 dimiliki .header) memiliki nilai specifity 110

Lalu, untuk apakah mengetahui specificity ini? Specificity dapat digunakan untuk mengatur susunan document css untuk mempermudah penggunaan pada skala besar, menghindari penggunaan secara masif !important, menghemat penamaan selector dan dengan mudah mengatur style untuk selector yang memiliki nama yang sama.