Hai teman-teman pada kesempatan kali ini saya akan menjelaskan tentang fungsi !important pada CSS, sering kali kita menemukan !important pada CSS. Sebenarnya apa sih fungsi dari !important itu sendiri?

Saya ingatkan kembali apabila pada sebuah css pada tag, div class maupun div id terdapat dua property CSS yang sama, maka property yang terakhir diketik atau yang paling bawahlah yang akan berfungsi, sedangkan yang lainnya tidak.

Biasanya penggunaan !important digunakan ketika mengatasi masalah bug CSS di browser IE (Internet Explorer).

Contoh Penggunaan !important

Dari script atau kode CSS diatas, jika website yang dibuat dibuka menggunakan browser IE, maka class jumbotron akan memiliki padding 20px sedangkan jika menggunakan browser selain IE akan memiliki padding 10px. Kenapa seperti itu? Karena browser IE tidak mengenal !important.

Kegunaan !important sendiri bisa juga digunakan pada saat ingin memberikan style atau merubah property baru pada spesifik property, padahal property tersebut sudah distyling oleh selector induk. Misalnya kita memiliki tiga buah halaman website yang file CSS nya itu hanya ada satu atau digabung semua dalam satu file CSS. Suatu ketika ketiga halaman website tersebut memiliki warna font yang sama semua, bagaimana caranya untuk merubah salah satunya saja? Andaikan warna font pada ketiga website tersebut berwarna kuning lalu pada satu halaman website teman-teman ingin merubahnya menjadi warna merah?

Misalnya settingan awalnya seperti ini

Pada script diatas akan berlaku pada semua halaman website. Namun apabila pada satu halaman website ingin dirubah menjadi warna merah, maka teman-teman perlu membuat file CSS lagi, yang hanya akan dipanggil pada satu halaman tersebut, dan teman-teman dapat merubah warnanya menjadi merah dengan mudah

Dengan script seperti itu pada satu halaman website tersebut akan berubah menjadi warna merah, nah teman-teman seperti itulah fungsi dari !important. Semoga bermanfaat.