!important CSS

Perintah !important dalam CSS digunakan untuk menambah kepentingan kepada sebuah properti/nilai dari biasanya.

Bahkan, jika menggunakan perintah !important, maka akan dapat menimpa semua perintah sebelumnya untuk properti tertentu pada elemen.

Contoh

#myid {
  background-color: red;
}

.myclass {
  background-color: green;
}

p {
  background-color: blue !important;
}

Hasil

Ini adalah teks di sebuah paragraf.

Ini adalah teks di sebuah paragraf.

Ini adalah teks di sebuah paragraf.

Penjelasan Contoh

Dalam contoh di atas, ketiga paragraf akan mendapatkan warna latar belakang biru, meskipun selektor ID dan selektor class memiliki spesifisitas yang lebih tinggi. Perintah !important menimpa properti background-color di kedua kode diatas.

Hal Penting Tentang !important

Satu-satunya cara untuk mengesampingkan perintah !important adalah dengan memasukkan perintah !important lain pada deklarasi dengan kekhususan yang sama (atau lebih tinggi) dalam kode sumber, dan di sini masalahnya dimulai. Ini membuat kode CSS jadi membingungkan dan debugging akan sulit, terutama jika kita memiliki style sheet yang besar.

Dibawah ini ada contoh sederhana. Tidak terlalu jelas ketika kita melihat kode sumber CSS, warna mana yang dianggap paling penting.

Contoh

#myid {
  background-color: red !important;
}

.myclass {
  background-color: green !important;
}

p {
  background-color: blue !important;
}

Hasil

Ini adalah teks di sebuah paragraf.

Ini adalah teks di sebuah paragraf.

Ini adalah teks di sebuah paragraf.

Tips: Penting untuk mengetahui tentang perintah !important, kita mungkin melihatnya di beberapa kode sumber CSS. Namun, jangan menggunakannya kecuali jika benar-benar harus melakukannya.

Menggunakan !important

Salah satu cara untuk menggunakan !important adalah jika kita harus mengganti style yang tidak dapat ditimpa dengan cara lain. Ini bisa terjadi jika kita bekerja pada CMS dan tidak dapat mengedit kode CSS. Kemudian kita dapat mengatur beberapa style khusus untuk mengganti beberapa style di CMS.

Cara lain untuk menggunakan !important adalah anggaplah kita menginginkan tampilan khusus untuk semua tombol pada halaman. Contoh dibawah ini, kita buat tombol style dengan warna background abu-abu, teks warna putih, dan beberapa padding dan border.

Contoh

.button {
  background-color: #424242;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

Hasil

Standar button: Tutorial CSS

Standar button: Tutorial HTML

Tampilan tombol terkadang dapat berubah jika kita meletakkannya di dalam elemen lain dengan spesifisitas yang lebih tinggi, dan propertinya berkonflik. Berikut ini contohnya.

Contoh

.button {
  background-color: #424242;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

Hasil

Standar button: Tutorial CSS

Teks link di dalam myDiv: Tutorial HTML

Button link di dalam myDiv: Tutorial HTML

Untuk "memaksa" semua tombol agar memiliki tampilan yang sama, apa pun yang terjadi, kita dapat menambahkan perintah !important ke properti tombol.

Contoh

.button {
  background-color: #424242 !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

Hasil

Standar button: Tutorial CSS

Teks link di dalam myDiv: Tutorial HTML

Button link di dalam myDiv: Tutorial HTML

Sumber referensi: w3schools