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.
awww.. ternyata ada nilanya ya? aku kira id itu gak ada yang ngalahin selain !important
satu lagi tambahan…
properti css inline (yg ditambahkan di dalam atribut
style) dianggap lebih penting daripada selector-selector diatas.ooh ..baru tau gw, lagi belajar css jg soalnya hehe, nice info bro!
alo om saya mau nanya neh… cara membuat surat penawaran kerja untuk rental alat berat bagai mana ya.
tolong di bantu ya.. plz tanks
Mau tanya.Kenapa kalau tampilan di IE tuh pas div terakhir biasanya lebih 2 karakter.
Jadi misal kita nulis pupung, terus nanti ada area di bawah yang keisi sama dua karakter “ng”. Biasanya saya kasih “ ” 2x aja biar ga keliatan. Tapi tetep jadi ada daerah kosong gitu.