Fungsi !important Pada CSS - Pernahkah kalian melihat tulisan !important yang terpampang di sebuah css? Dan tahukah anda fungsinya. Jika tidak tahu maka akan saya beri tahu. Karena dibalik keberadaanya !important memiliki fungsi dan peran yang penting.
!important adalah fitur css yang berfungsi memberi prioritas atau memberikan kekhususan pada sebuah property untuk dijalankan. Artinya, jika sebuah property diberi embel-embel !important, property ini akan menjadi prioritas dan menjadi lebih kuat dan khusus dijalankan. Contoh Kondenya.
h1 {
color: red !important;
}
Untuk lebih jelasnya, berikut penjelasan ilmiahnya.
Disini saya memiliki sebuah h1 dengan id huheh. Berikut kondenya.
HTML
<h1 id="huheh">Ini judul</h1>
CSS
h1 {
h1#huheh {
body h1 {
#huheh {
background-color: red;
}h1#huheh {
background-color: blue;
}body h1 {
background-color: black;
}#huheh {
background-color: green;
}
Bisa dilihat tag h1 memiliki background yang berbeda-beda. Apakah warna background dari h1? berikut hasilnya
Dan ternyata warna bgnya jadi biru. Mengapa? karena di cssnya penamaanya lebih spesifik, jadi dialah yang menang.
Bagaimana jika kita mau menginginkan #huheh pada csslah yang menang? Disinilah si !important dibutuhkan, yaitu dengan menambahkan !important dibelakang property #huheh, dengan begitu ia akan diprioritaskan.
CSS
h1 {
h1#huheh {
body h1 {
#huheh {
background-color: red;
}h1#huheh {
background-color: blue;
}body h1 {
background-color: black;
}#huheh {
background-color: green !important;
}
Hasinlnya
Tada, suprise!!, bagckgroundnya menjadi hijau berkat !important.
Itulah penjelasan singkat mengenai kegunaan dari !important, semoga dapat bermanfaat bagi kalian.
Sekian postingan saya yang berjudul Fungsi !important Pada CSS.
Jangan lupa baca postingan saya sebelumnya
0 komentar:
Posting Komentar