cloud-hosting-terbaik-indonesia

Tutorial Belajar CSS Part 8: Urutan Prioritas Selector CSS (Specificity)

Posted on

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 :

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:

  1. Setiap element/tag selector bernilai 0,0,0,1
  2. Setiap class selector, attribut selector bernilai 0,0,1,0
  3. Setiap ID selector bernilai 0,1,0,0
  4. Setiap inline style bernilai 1,0,0,0

Dengan menggunakan aturan tersebut, mari kita hitung angka ke-spesifik-an pada contoh sebelumnya.

  1. Selector p, hanya terdiri dari 1 tag selector, karenanya nilainya: 0,0,0,1
  2. Selector div p, terdiri dari 2 tag selector, karenanya nilainya: 0,0,0,2
  3. Selector #aaa, terdiri dari 1 ID selector, karenanya nilainya: 0,1,0,0
  4. Selector body div p, terdiri dari 3 tag selector, karenanya nilainya: 0,0,0,3
  5. 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.

Acap kali pada menyusun sebuah laman yang lumayan kompleks, kita akan sering dikerjakan pusing dan bertanya-tanya kenapa style yang telah ditulis tak merubah kode HTML yang terdapat, atau tak berefek apa-apa. Mungkin jawabannya ialah nilai selector tersebut tertimpa oleh nilai selector lain yang lebih spesifik. Memahami aturan prioritas dan ke-spesifik-an CSS ini betul-betul urgen bagi menghindari hal tersebut.


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.

Perhatikan ahir baris di selector p, saya menambahkan petunjuk !important diakhir property, dan seperti yang dapat ditebak, paragraf kita sekarang ini akan berwarna merah.

Pemakaian petunjuk !important sebaiknya digunakan seandainya memang telah terdesak dan sedapat mungkin dihindari,. Hal ini karena petunjuk !important akan mengubah urutan prioritas dan akan menyulitkan perancangan CSS.


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

Jikalau kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/