Di panduan belajar CSS kali ini saya akan membahas mengenai urutan prioritas selector CSS seandainya dilihat dari ke-spesifik-an selector yang digunakan, atau di pada istilah bahasa inggris: “CSS Specificity”.
Pengertian ke-spesifik-an selector CSS
Jikalau di panduan sebelumnya kita telah membahas mengenai urutan prioritas CSS berdasarkan sumber kode CSS tersebut (dimana inline style mempunyai prioritas terkuat), di artikel kali ini kita akan melihat urutan prioritas kode CSS seandainya seluruh kode CSS tersebut berada pada file yang sama. Pada kasus ini kita akan mempelajari apa yang akan terjadi seandainya beberapa kode CSS yang dikerjakan saling menimpa.
Agar lebih gampang dimengerti, saya akan seketika merancang file sampel kita, yaitu spesifik.html :
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/> <title>Contoh Kasus Spesifik CSS</title><br/> <style type=text/css><br/> p {<br/> color:red;<br/> }<br/> div p {<br/> color:green;<br/> }<br/> #aaa{<br/> color:orange;<br/> }<br/> body div p {<br/> color:yellow;<br/> }<br/> div p.kalimat {<br/> color:silver;<br/> }<br/> </style><br/></head><br/><br/><body><br/> <div><br/> <p id=aaa><br/> Sedang Belajar CSS...<br/> </p><br/> </div><br/></body><br/></html> |
Sebelum kamu menjalankan file spesifik.html tersebut, silahkan perhatikan terlebih dahulu defenisi CSS diatas. Terdapat 5 jenis selector yang ‘mencoba‘ bagi 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” ialah tempat pendefenisisan warna “color:orange”, namun bagaimana ini dapat terjadi? bagaimana dengan ke-4 defenisi lainnya?
Jawabannya: karena selector #aaa dianggap sangat spesifik atau sangat detail dari ke-5 selector lainnya.
Cara Menghitung ke-spesifik-an Selector CSS
CSS mempunyai aturan tertentu mengenai ke-spesifik-an selector, yaitu ketika sebuah property dari CSS, saling menimpa satu sama lain, selector yang sangat spesifik lah yang akan menang.
Aturan ke-spesifik-an 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 gampang nilai 0,1,0,0 dapat ditulis menjadi 0100, dan nilai 0,0,1,5 menjadi 0015.
Berikut ialah nilai CSS Specificity bagi selector di pada 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 ke-spesifik-an pada contoh sebelumnya.
- Selector p, hanya terdiri dari 1 tag selector, karenanya nilainya: 0,0,0,1
- Selector div p, terdiri dari 2 tag selector, karenanya nilainya: 0,0,0,2
- Selector #aaa, terdiri dari 1 ID selector, karenanya nilainya: 0,1,0,0
- Selector body div p, terdiri dari 3 tag selector, karenanya nilainya: 0,0,0,3
- Selector div p.kalimat, terdiri dari 1 class selector dan 2 tag selector, karenanya nilainya: 0,0,1,2
Dari hasil yang kita peroleh, karenanya selector #aaa mempunyai nilai sangat tinggi, yaitu 0,1,0,0. Karenanya, karena begitulah paragraf pada contoh spesifik.html akan bewarna orange.
Mengenal petunjuk !important
Jikalau aturan prioritas diatas tak lumayan, CSS menyediakan “senjata” pamungkas, yaitu menggunakan petunjuk !important.
Petunjuk !important diletakkan di belakang propery dari CSS, dan petunjuk !important ini akan mengambil alih urutan prioritas CSS yang kita pelajari diatas. Mari kita ubah spesifik.html dengan menambahkan petunjuk !important.
|
1 2 |
<!DOCTYPE html><br/><html><br/><head><br/> <title>Contoh Kasus Spesifik CSS !important</title><br/> <style type=text/css><br/> p {<br/> color:red !important;<br/> }<br/> div p {<br/> color:green;<br/> }<br/> #aaa{<br/> color:orange;<br/> }<br/> body div p {<br/> color:yellow;<br/> }<br/> div p.kalimat {<br/> color:silver;<br/> }<br/> </style><br/></head><br/><br/><body><br/> <div><br/> <p id=aaa><br /> Sedang Belajar CSS...<br/> </p><br/> </div><br/></body><br/></html> |
Perhatikan ahir baris di selector p, saya menambahkan petunjuk !important diakhir property, dan seperti yang dapat ditebak, paragraf kita sekarang ini akan berwarna merah.
Pada panduan CSS kali ini, dapat dinamakan bahwa perancangan kode CSS sebetulnya lebih condong ke seni (art) daripada pemograman. Karena selain memikirkan bagaimana tampilan web, kita pun mesti memperhatikan aturan prioritas dan ke-spesifik-an CSS, dan mengombinasikannya bagi merancang tampilan laman yang indah.
Pada panduan CSS berikutnya, kita akan membahas Sifat Penurunan Dalam CSS, atau sering disebut pun dengan Inheritance pada CSS, yakni mengenai penurunan efek CSS dari sebuah tag kepada tag lainnya.
eBook CSS Uncover Duniailkom
Sumber https://www.duniailkom.com/
