Setelah dalam 2 tutorial sebelumnya kita telah membahas bagaimana sebuah urutan prioritas dari selector css dilihat dari sumber kodenya, dan kespesifikan dari selector css.
Dalam tutorial kali ini kita akan membahas mengenai perintah !important dalam penulisan kode css.
Perintah !important yang dituliskan di akhir sebuah kode css, akan berfungsi untuk memberikan sebuah prioritas lebih terhadap kode css, jika memang terdapat beberapa selector yang memanipulasi 1 objek secara bersamaan, seperti contoh pada tutorial sebelumnya.
untuk lebih memahami konsep dari perintah !important ini kita akan menggunakan kode HTML dan CSS yang telah kita bahas di tutorial sebelumnya :
<!DOCTYPE html>
<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">Ini adalah text dengan H1</h1>
</div>
</body>
</html>Pada kode diatas kita menambahkan perintah !important pada selector h1.
h1
{
color:green !important;
}setelah itu kita simpan semisal dengan nama perintah_important_css.html , lalu kita buka di browser maka hasilnya adalah sebagai berikut :
Terlihat untuk warna textnya menjadi warna hijau.
Pada dalam tutorial sebelumnya mengenai perhitungan selector, seharusnya text menjadi warna orange karena terkena effect dari internal style lebih diprioritaskan, dan selector h1 yang memberikan warna hijau berada di urutan prioritas terakhir.
Nah itu adalah fungsi dari perintah !important ketika digunakan pada kode css, maka kode css itu akan mendapatkan prioritas lebih, Sehingga pada contoh diatas untuk tag selector h1 yang memberikan warna hijau lebih diprioritaskan karena ada tambahan kode !important di akhir kode CSSnya.
Bagaimana mudah kan ??
Baik itu dulu yang bisa warung belajar bahas mengenai perintah !important pada css, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial css selanjutnya.
Post a Comment (0)