Iklan bawah header

Belajar CSS : Mengenal Perintah !important di CSS

perintah !important di css

Perintah !important yang ditulis di akhir pada sebuah kode CSS memiliki fungsi untuk memberikan sebuah prioritas lebih terhadap kode CSS, jika memang terdapat beberapa selector pada sebuah kode CSS yang memanipulasi 1 objek secara bersamaan.

Untuk lebih jelasnya mengenai perintah !important bisa kalian perhatikan contoh dibawah ini :

<html>
<head>
<title>Prioritas CSS Spesifik</title>
<style type="text/css">
	h1 
	{
		color:green !important; 
	}
	div h1
	{
		color:red;
	}
	#testing
	{
		color:blue;
	}
	body div h1
	{
		color:yellow;
	}
</style>
</head>
<body>
<div>
<h1 style="color:orange;" id="testing">perintah !important</h1>
</div>
</body>
</html>

Perhatikan kode di atas, terdapat perintah !important pada selector h1.


h1 
	{
		color:green !important; 
	}

Setelah itu simpan kode diatas, lalu jalankan di browser maka hasilnya akan seperti dibawah ini :

!important

Perhatikan gambar di atas, bisa kalian lihat warna teksnya menjadi hijau. Padahal seharusnya warna teksnya menjadi warna orange karena effect dari inline style itu lebih diprioritaskan, dan selector h1 yang memberikan warna hijau berada di urutan terakhir.

Nah seperti itu lah fungsi dari perintah !important ketika digunakan pada kode CSS, maka kode tersebut akan mendapatkan prioritas yang lebih, sehingga pada contoh diatas untuk selector h1 yang memberikan warna hijau lebih diprioritaskan karena ada tambahan kode !important.

Demikianlah pembahasan mengenai perintah !important pada CSS. Semoga bermanfaat

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel