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.
10 Responses to Specificity Pada CSS
Deon@MakeMac November 23, 2008
awww.. ternyata ada nilanya ya? aku kira id itu gak ada yang ngalahin selain !important :D
Rizky November 24, 2008
satu lagi tambahan…
properti css inline (yg ditambahkan di dalam atribut
style) dianggap lebih penting daripada selector-selector diatas.adit December 9, 2008
ooh ..baru tau gw, lagi belajar css jg soalnya hehe, nice info bro!
ohoy December 16, 2008
alo om saya mau nanya neh… cara membuat surat penawaran kerja untuk rental alat berat bagai mana ya.
tolong di bantu ya.. plz tanks
cizkah December 25, 2008
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.
dani January 22, 2009
nah ini yg bikin bingung kl pas mo numpuk2 fungsi yg mirip di css..ternyata ada spesifisitasnya sendiri ya
yaddi February 5, 2009
to cizkah:
css untuk IE, khususnya versi 6 ke bawah harus dengan trik-trik khusus.
Yogi April 26, 2009
Lol, gw jg baru tau ada nilainya :D
Nice article mate, dapet ilmu baru nich gw…
anKa May 19, 2009
wah nice info…
@cizkah
coba pake font-size:0;
cizkah March 11, 2010
Aku dah nemu masalahnya kok. Itu krn floatingnya yang berulang. Kalo di IE suka jadi bermasalah. Jadi dia mesti ada ada div yang mengandung clear:both gitu.
Bingung ya?