Tutorial CSS untuk Pemula: Mengenal Perintah dan Fungsi !important pada CSS



Halo gan. Di postingan sebelumnya, kita sudah membahas prioritas selector CSS atau CSS Specificity.

..yang mana, tiap selector punya angka tersendiri untuk menentukan style selector manakah yang paling kuat sehingga akan tampil di halaman web.

Kita review sedikit ya.

..tiap elemen/tag bernilai 0001.
..tiap class, psuedo-class, atribute bernilai 0010.
..tiap id bernilai 0100.
..tiap inline style bernilai 1000.

Contohnya ada di postingan sebelumnya kok, lanjut bahasan selanjutnya.

Kali ini, kita akan bahas perintah !important pada CSS. Sering lihat !important di kode CSS?

Apa sih gunanya?

fungsi perintah important css

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.

fungsi perintah important css

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..

fungsi perintah important css

Itu perintah !imporant di selector yang berbeda. Selanjutnya, kita coba perintah !important di dalam 1 selector.

Baca juga ya..

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.

fungsi perintah important css

Sekarang, kita coba tambahkan !important di deklarasi yang pertama.
p {
  background: black !important;
  background: blue;
  background: green;
}

Maka, background akan berwarna hitam.

fungsi perintah important css

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.




Tag : Tutorial CSS
0 Komentar untuk "Tutorial CSS untuk Pemula: Mengenal Perintah dan Fungsi !important pada CSS"