Sebelumnya, kita sudah membahas prioritas selector CSS. Kali ini kita akan membahas cara pakai dan fungsi !important pada CSS. Berikut pembahasan AneIqbal selengkapnya.
Kali ini, kita akan bahas perintah !important pada CSS. Sering lihat !important di kode CSS?
Apa sih gunanya?
Fungsi perintah !important pada CSS
Perintah !important ini terletak di belakang value dari suatu property. Fungsinya adalah untuk mengambil alih style dari prioritas selector CSS.
..artinya, perintah !important ini jauh lebih kuat dibanding dengan prioritas selector CSS, karena di ambil alih stylenya oleh si !important ini.
Contoh kodenya:
p { color: red !important; }
Perintah !important di selector yang berbeda
Kita akan mengubah warna background dari sebuah heading h1 dengan beberapa selector.
Kode HTMLnya kita simpan dengan nama important.html
<!DOCTYPE html>
<html>
<head>
<title>Fungsi Perintah !important CSS</title>
<link rel="stylesheet" href="important.css" />
</head>
<body>
<h1 id="judul">Ini adalah judul</h1>
</body>
</html>
Kode CSSnya kita simpan dengan nama important.css.
h1 {
background: yellow;
}
body h1 {
background: red;
}
#judul {
background: blue;
}
h1#judul {
background: green;
}
Dari ke-4 selector di atas, yang menang adalah selector h1#judul sehingga backgroundnya berwarna hijau.
Sekarang, kita coba tambahkan !important pada selector yang pertama, yakni selector h1, karena selector inilah yang jumlah angkanya paling rendah dari ke semua selector di atas.
h1 {
background: yellow !important;
}
body h1 {
background: red;
}
#judul {
background: blue;
}
h1#judul {
background: green;
}
Maka, backgroundnya akan berwarna kuning. Style di ambil alih oleh perintah !important..
Itu perintah !imporant di selector yang berbeda. Selanjutnya, kita coba perintah !important di dalam 1 selector.
Perintah !important di dalam 1 selector yang sama
Kita akan beri style background sebuah paragraf.. buat file HTML important2.html, seperti ini kodenya:
<!DOCTPYE html>
<html>
<head>
<title>Fungsi Perintah !important CSS</title>
<link rel="stylesheet" href="important2.css" />
</head>
<body>
<p>Fungsi perintah !important penjelasannya ada di AneIqbal.. Fungsi perintah !important penjelasannya ada di AneIqbal.. Fungsi perintah !important penjelasannya ada di AneIqbal.. </p>
</body>
<html>
File important2.css.
p {
background: black;
background: blue;
background: green;
}
Kode CSS di atas memuat 3 deklarasi dengan property yang sama namun punya value yang berbeda.
Warna background apakah yang akan tampil? yap, benar, hijau.
..web browser akan menjalankan deklarasi (property & value) yang akhir.
Sekarang, kita coba tambahkan !important di deklarasi yang pertama.
p {
background: black !important;
background: blue;
background: green;
}
Maka, background akan berwarna hitam.
Perintah !important akan mengabaikan urutan prioritas CSS. Dia akan mengambil alih stylenya.
..jadi sebaiknya, jangan menggunakan perintah !important kecuali benar-benar terpaksa.
Sekian pembahasan kita kali ini tentang perintah dan fungsi important pada CSS.
Selanjutnya, kita akan bahas Inheritance CSS atau Penurunan Style.
