urutan prioritas pada selektor css

17.30 Cecep101 0 Comments

Asslamu'Alaikum..

Halo, sobat WTD sore ini saya ingin membahas kelanjutan dari dasar css yang sudah saya posting sebelumnya, kali ini saya akan membahas tentang prioritas pada selektor css, maksudnya adalah saat browser membaca css anda maka yang mana yang akan didahulukan. langsung saja lihat pada gambar :


Perhatikan baik-baik css diatas. saya sudah memberi background berbeda pada setiap selektor.

Aturan mainnya adalah selektor yang paling spesifiklah yang akan menjadi pemenangnya. lalu set background yang kalah akan kemana? tentusaja yang kalah hanya akan tertimpa oleh pemenang, seperti hukum Alam.

Jadi Aturannya adalah seperti ini!

1. Setiap element/tag selector bernilai 0.0.0.1
2. Setiap Class selector bernilai 0.0.1.0
3. Setiap id selector bernilai 0.1.0.0
4. dan setiap inline selektor akan bernilai 1.0.0.0

Semakin angkanya mendekat ke kiri maka semakin spesifiklah suatu selektor.

nah, jadi yang paling diutamakan oleh browser adalah yang inline selector. apa itu inline selektor, bagi yang belum tau haraf baca ini dulu penulisan dasar css. bagi yang udah ngerti kita lanjut gan.!

sekarang saatnya kita hitung ke-spesifikan dari code yang kita buat tadi.

1. selektor div bernilai 0.0.0.1
2. selektor p bernilai 0.0.0.1
3. selektor div p bernilai 0.0.0.2
4. selektor div p.text bernilai 0.0.1.2
5. selektor #string bernilai 0.1.0.0

jadi dari code diatas maka yang menang/ yang paling spesifik adalah #string jadi dia yang lebih diutamakan. silahkan cek codenya JSFiddle - prioritas CSS.

Selanjutnya perintah !important

!important pada css digunakan saat mendesak intinya adalah important akan merubah seluruh prioritas pada css dan !importantlah yang paling diutamkan.


Perhatikan code diatas! pastikan anda menggunkan !important. disaat terdesak, karena selain perintah ini akan menghancurkan urutan prioritas yang ada code juga akan semakin membingungkan bagi orang yang awam. silahkan cek JSFiddle - Prioritas css dengan perintah !important silahkan tambahkan !important pada selektor yang mana saja.

Sekian Tulisan saya kali ini, semoga membantu.

Asslamu'Alaikum..