CSS: Urutan Prioritas Selector CSS (Specificity)

Assalamu'alaikum wr.wb

Pada postingan kali ini saya akan membahas tentang Urutan Prioritas Selector CSS (Specificity). Jika pada tutorial sebelumnya kita telah membahas tentang Urutan Prioritas Selector CSS (Cascading), yaitu kode CSS tersebut (inline style memiliki prioritas terkuat), pada artikel kali ini kita akan melihat urutan prioritas kode CSS jika seluruh kode CSS tersebut berada dalam file yang sama. Dalam kasus ini kita akan mempelajari apa yang akan terjadi jika beberapa kode CSS yang dibuat saling menimpa.

Agar lebih mudah dipahami, sillahkan buat file HTML dengan nama spesifik.html :

Sebelum anda menjalankan file spesifik.html tersebut, silahkan perhatikan terlebih dahulu defenisi CSS diatas. Terdapat 5 jenis selector yang ‘mencoba‘ untuk merubah warna sebuah paragraf. Dan silahkan tebak akan bewarna apa paragraf “Sedang Belajar CSS…

Dan, seperti yang kita lihat, paragraf tersebut tampak berwarna orange, dimana selector CSS “#aaa” adalah tempat pendefenisisan warna “color:orange”, namun bagaimana ini bisa terjadi? bagaimana dengan ke-4 defenisi lainnya?

Jawabannya: karena #aaa dianggap paling spesifik atau paling detail dari ke-4 selector lainnya.


Cara Menghitung kespesifikan Selector CSS

CSS memiliki aturan tertentu tentang ke-spesifik-an selector, yaitu ketika sebuah property dari CSS, saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang.

Aturan kespesifikan CSS dihitung menggunakan formula 4 digit, contohnya: 0,1,0,0. Perhitungannya sama seperti hitung-hitungan kita sehari-hari, dimana 0,1,0,0 lebih besar dari 0,0,1,5, atau agar lebih mudah nilai 0,1,0,0 bisa ditulis menjadi 0100, dan nilai 0,0,1,5 menjadi 0015.

Berikut adalah nilai CSS Specificity untuk selector di dalam CSS:

• Setiap element/tag selector bernilai 0,0,0,1
• Setiap class selector, attribut selector bernilai 0,0,1,0
• Setiap ID selector bernilai 0,1,0,0
• Setiap inline style bernilai 1,0,0,0

Dengan menggunakan aturan tersebut, mari kita hitung angka kespesifikan dalam contoh sebelumnya.

• Selector p, hanya terdiri dari 1 tag selector, maka nilainya: 0,0,0,1
• Selector div p, terdiri dari 2 tag selector, maka nilainya: 0,0,0,2
• Selector #aaa, terdiri dari 1 ID selector, maka nilainya: 0,1,0,0
• Selector body div p, terdiri dari 3 tag selector, maka nilainya: 0,0,0,3
• Selector div p.kalimat, terdiri dari 1 class selector dan 2 tag selector, maka nilainya: 0,0,1,2

Dari hasil yang kita peroleh, maka selector #aaa memiliki nilai paling tinggi, yaitu 0,1,0,0. Maka, karena itulah paragraf dalam contoh spesifik.html bewarna orange.

Sering kali dalam merancang sebuah website yang cukup kompleks, kita akan sering dibuat pusing dan bertanya-tanya kenapa style yang telah ditulis tidak merubah kode HTML yang ada, atau tidak berefek apa-apa. Mungkin jawabannya adalah nilai selector tersebut tertimpa oleh nilai selector lain yang lebih spesifik. Memahami  aturan prioritas dan kespesifikan CSS sangat penting untuk menghindari hal tersebut.


Mengenal Perintah !important

Jika aturan prioritas diatas tidak cukup, CSS menyediakan “senjata” pamungkas, yaitu menggunakan perintah !important.

Perintah !important diletakkan di belakang propery dari CSS, dan perintah !important ini akan mengambil alih urutan prioritas CSS yang kita pelajari diatas. Mari kita ubah spesifik.html dengan menambahkan perintah !important.

Perhatikan akhir baris pada selector p, saya menambahkan perintah !important diakhir property, dan seperti yang bisa ditebak, paragraf kita sekarang akan berwarna merah.

Penggunaan perintah !important sebaiknya digunakan jika memang sudah terdesak dan sedapat mungkin dihindari. Hal ini karena perintah !important akan mengubah urutan prioritas dan akan menyulitkan perancangan CSS.
 

Sekian pembahasan tentang Urutan Prioritas Selector CSS (Specificity).

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb