CSS Dasar Part 10 - CSS Specifity

CSS Dasar Part 10 - CSS Specifity - Konsep Specifity adalah sebuah konsep sederhana yang ada pada CSS, namun memiliki peran penting ketika kita menentukan selector yang fungsinya memberikan style pada elemen HTML tertentu, dimana kita tahu, bahwa selector adalah elemen yang pertama yang kita harus tentukan ketika kita ingin memberi style pada halaman HTML dengan memanipulasi property dari elemen HTML yang menjadi selector. Karena itu sebaiknya kita bisa memahami konsep ini dengan baik, agar kita bisa memahami seberapa penting dan bernilai selector CSS yang kita buat. Definisi Specifity menurut link http://www.smashingmagazine.com/2010/04/07/css-specifity-and-inheritance/ adalah sebagai berikut :

Setiap deklarasi CSS ( selector ) memiliki berat yang berbeda, berat tersebut menentukan seberapa spesifik sebuah elemen dapat dipilih oleh selector.

CSS Specifity

Dalam artikel saya yang berjudul Penggunaan dan Pemilihan Selector Pada CSS, saya pernah menyinggung bahwa dalam pemilihan selector sebisa mungkin kita menggunakan elemen HTML, lalu prioritas kedua menggunakan class, baru setelah itu kita menggunakan id. Why?.. karena ibarat kita mengukur/menimbang sesuatu dengan menggunakan alat ukur/alat timbang yang outputnya berupa hasil/nilai yang direpresentasikan dengan standar angka, maka pemilihan/penentuan selector dengan menggunakan elemen HTML memiliki nilai 1, kemudian menggunakan class memiliki nilai 10, dan id memiliki nilai 100. Semakin besar nilai angka dari output yang dihasilkan, otomatis beratnya pun akan semakin besar. Maka apabila kita terapkan dalam konsep specifity, angka/nilai yang dihasilkan akan bisa menentukan seberapa khusus selector yang kita gunakan. Semakin khusus sesuatu, biasanya akan menjadi perhatian dan prioritas utama dalam mengerjakan/menyelesaikan sesuatu, dan yang pasti bobot/berat nilainya pun pasti akan semakin besar karena menjadi prioritas tertentu. Artinya, selector yang memilki bobot/berat nilai yang semakin berat, maka menjadi sangat specifik, sehingga prioritas dalam pemberian style-nya pun akan lebih diutamakan dari selector lainnya.

Lalu bagaimana dengan selector-selector yang memiliki bobot/berat yang sama, atau tingkatan yang memiliki level yang sama pada kondisi pemberian style suatu elemen HTML tertentu, kalau dari penjelasan paragraph di atas bahwa selector semakin berat, maka semakin specifik, semakin specifik selector, maka otomatis pengerjaan pemberian style-nya pun akan lebih diutamakan. Untuk selector-selector yang memiliki level yang sama pada pemberian style elemen tertentu, maka aturan pengerjaan style CSS pada elemen HTML tertentu tersebut akan mengerjakan selector yang terakhir dibuat berapun jumlah selector tersebut. Artinya, selector yang terbaru atau terakhir dibuat akan menimpa atau meng-overwrite selector sebelumnya. Sebagai contohnya bisa lihat dibawah ini :

Pemberian Style CSS Pada Elemen HTML Yang Sama

Bayangkan kita berada dalam sebuah pertandingan olahraga, biasanya dalam pertandingan olahraga terdapat papan score yang fungsinya untuk mengetahui kondisi menang dan kalah player yang bertanding yang direpresentasikan dalam angka di papan score. Begitu juga dengan selector, setiap selector memiliki angka score seperti papan score dalam pertandingan olahraga seperti yang tampak pada gambar dibawah ini.

Papan Score Untuk Selector

Pada papan score selector kita bisa mengetahui berat sebuah selector, sehingga kita bisa menentukan seberapa spesifik selector yang kita buat, semakin besar score-nya maka otomatis selector-nya pasti lebih spesifik. Hasil yang ada pada papan score selector, tidak akan terpengaruh dengan selector yang terakhir dibuat, tidak seperti pada kondisi beberapa selector yang memiliki score/level yang sama, maka selector terakhir akan menimpa/meng-overwrite selector sebelumnya. Score selector hanya akan berkonsentrasi pada hasil dari papan score selector saja untuk membuat prioritas pengerjaan pemberian style pada elemen HTML tertentu. Untuk lebih jelas silakan lihat contoh dibawah ini :

Mengukur Berat Sebuah Selector

Dari contoh di atas kita bisa melihat bahwa class memiliki score yang lebih berat dibanding dengan elemen HTML, karena itu style warna dari paragraph berwarna salmon akibat dari class p1.

Suatu saat mungkin kita mengalami satu kondisi dimana kita ingin memberi style pada elemen HTML, namun style yang kita berikan tidak berjalan. Padahal mungkin kita sudah membuat sebuah penanda agar elemen tersebut bisa menampilkan suatu style tertentu. Contohnya seperti pada gambar dibawah ini. ada list/daftar olahraga favorit, dimana diantara daftar olahraga tersebut, ada satu olahraga paling kita sukai, contohnya senam, dan kita ingin memberi warna yang berbeda dengan list lain. Untuk menandai bahwa senam adalah olahraga favorit, kita membuat sebuah class fav, agar warnanya berbeda dari yang lain, namun ternyata hasilnya tidak sesuai dengan keinginan kita. Dalam kasus ini, ada baiknya kita menggunakan konsep papan score selector untuk mengetahui score selector kita sehingga kita bisa mengetahui seberapa spesifik selector tersebut.

Membuat Selector Yang Lebih Spesifik

Setelah kita menggunakan papan score selector, kita jadi tahu, bahwa selector yang kita buat untuk olahraga senam ternyata kurang berat, sehingga style yang akan tampil, mengikuti style dari selector yang lebih berat dan spesifik. Karena itu apabila kita suatu saat mengalami kondisi semacam ini, yang bisa kita lakukan untuk mengatasi masalah ini, adalah sebagai berikut:

Buat elemen yang diinginkan/ditarget untuk diberi style menjadi lebih spesifik, kemudian tambahkan beban pada elemen tersebut agar semakin berat sehingga CSS memprioritaskan style tersebut.

Specifity CSS

Pembahasan mengenai konsep Spesifikasi CSS yang ada pada CSS dan bagaimana cara penggunaanya, sekian dulu. Semoga teman-teman bisa mengerti penjelasan ini, terutama bagi para pemula yang baru belajar CSS. Apabila ada pertanyaan, kritik dan saran. Silakan ajukan pada kolom komentar dibawah ini. semoga artikel ini bisa bermanfaat buat teman-teman semua, terutama bagi para pemula. Tetap semangat nge-blog. See you on my next articles. Bye-bye....

Referensi:
https://www.w3schools.com
https://www.w3schools.com/css
http://www.w3.org/style/CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
http://www.smashingmagazine.com/2010/04/07/css-specifity-and-inheritance

• kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
• the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.

Share :