CSS !Aturan penting
Apa yang penting?
Aturan !importantdalam CSS digunakan untuk menambahkan lebih penting ke properti/nilai dari biasanya.
Bahkan, jika Anda menggunakan !importantaturan, itu akan menimpa SEMUA aturan penataan gaya sebelumnya untuk properti tertentu pada elemen itu!
Mari kita lihat sebuah contoh:
Contoh
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Contoh Dijelaskan
Dalam contoh di atas. ketiga paragraf akan mendapatkan warna latar belakang merah, meskipun pemilih ID dan pemilih kelas memiliki spesifisitas yang lebih tinggi. Aturan !importantmenimpa
background-colorproperti dalam kedua kasus.
Penting Tentang !penting
Satu-satunya cara untuk mengesampingkan !important
aturan adalah dengan memasukkan !important
aturan lain pada deklarasi dengan kekhususan yang sama (atau lebih tinggi) dalam kode sumber - dan di sini masalahnya dimulai! Ini membuat kode CSS membingungkan dan debugging akan sulit, terutama jika Anda memiliki style sheet yang besar!
Di sini kami telah membuat contoh sederhana. Tidak terlalu jelas, ketika Anda melihat kode sumber CSS, warna mana yang dianggap paling penting:
Contoh
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Tip: Adalah baik untuk mengetahui tentang !important
aturan, Anda mungkin melihatnya di beberapa kode sumber CSS. Namun, jangan menggunakannya kecuali Anda benar-benar harus melakukannya.
Mungkin Satu atau Dua Penggunaan Wajar dari !penting
Salah satu cara untuk digunakan !importantadalah jika Anda harus mengganti gaya yang tidak dapat ditimpa dengan cara lain. Ini bisa terjadi jika Anda bekerja pada Sistem Manajemen Konten (CMS) dan tidak dapat mengedit kode CSS. Kemudian Anda dapat mengatur beberapa gaya khusus untuk mengganti beberapa gaya CMS.
Cara lain untuk digunakan !importantadalah: Asumsikan Anda menginginkan tampilan khusus untuk semua tombol pada halaman. Di sini, tombol ditata dengan warna latar abu-abu, teks putih, dan beberapa padding dan batas:
Contoh
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
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: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Untuk "memaksa" semua tombol agar memiliki tampilan yang sama, apa pun yang terjadi, kita dapat menambahkan !important
aturan ke properti tombol, seperti ini:
Contoh
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}