CSS Specificity

Sebelumnya saya mengucapkan selamat tahun baru 2015 ya! Semoga resolusi tahun 2015 ini dapat berjalan dengan lancar hehe. Ok kita masuk ke tutorial yaa.

Untuk pengertian CSS sudah saya jelaskan di sini maka kita langsung ke intinya saja.

Apa sih CSS Specificity itu?

---

Seperti yang kita ketahui bahwa selector di CSS ada 3 tipe (Tag, Class, dan Div). Maka misalnya saja ada 3 admin di blog anda dan masing-masing akan mengatur style dari sebuah tag dan style yang sama (misal <marquee> dengan ) , bagaimana browser akan menjalankannya? Tidak mungkin bukan jika ketiga-tiganya dijalankan, bisa nggak karuan nanti. Nah biar lebih jelasnya silahkan lihat contoh.

Misal si admin 1 menentukan tag begini :

<marquee style="color=red">Hai</marquee>

Eeh si admin 2 nyikat kayak gini :

marquee {color : blue;}

<marquee>Hai!</marquee>

Trus admin 3 usil usil sikat pake yang ini

 .asin {color : green;}

<marquee class="asin">Hai!</marquee>

Nah siapakah yang akan terpilih dan ditampilkan oleh browser?
Disinilah CSS Specificity dibutuhkan saya akan memperkenalkannya. Simak ya...
1. CSS dengan selector tag akan memiliki nilai 1
2. CSS dengan selector class akan memiliki nilai 10
3. CSS dengan selector id akan memiliki nilai 100
4. CSS dengan selector inline akan memiliki nilai 1000

Nah sudah tahukan siapa yang akan terpilih? Tentu saja admin 1 yang terpilih dengan pertimbangan :
admin 1 (Inline) Skor 1000
admin 2 (Selector tag) Skor 1
admin 3 (Selector class) Skor 10

Nah sudah paham kan? Sekarang jika memang blog/website anda memiliki lebih dari 1 admin, maka anda bisa mengguakan CSS tipe Inline tapi, dengan konsekuensi anda akan sangat kerepotan jika ada 2 tag sama yang akan anda atur. Ok, sekian ya terima kasih dan sampai jumpa.

Tweet