Urutan Prioritas Selector CSS (Specificity)

September 17, 2019 0 komentar
Share:



Pada tutorial belajar CSS kali ini saya akan membahas urutan prioritas selector CSS jika dilihat dari ke-spesifik-an (Specificity) selector yang digunakan.
Jika pada tutorial sebelumnya kita telah membahas tentang urutan prioritas CSS berdasarkan sumber kode CSS tersebut, dimana inline style merupakan prioritas terkuat, pada artikel kali ini kita akan melihat urutan prioritas kode CSS dalam file yang sama. Dalam kasus ini kita akan  membuat beberapa kode CSS yang saling menimpa.
Agar lebih mudah dipahami, saya akan langsung membuat file sample, yaitu spesifik.html :

<!DOCTYPE html>
<html>
<<span id="e3csfs408382_9" class="e3csfs408382">head</span>>
<title>Contoh Kasus Spesifik CSS</title>
<<span id="e3csfs408382_8" class="e3csfs408382">style</span> type="text/css">
p {
<span id="e3csfs408382_6" class="e3csfs408382">color</span>:red;
}
div p {
color:green;
}
#aaa{
color:orange;
}
<span id="e3csfs408382_5" class="e3csfs408382">body</span> div p {
color:yellow;
}
div p.kalimat {
color:silver;
}
</style>
</head>
<body>
<div>
<p id="aaa">
Sedang Belajar CSS...
</p>
</div>
</body>
</html>
Sebelum anda menjalankan file spesifik.html tersebut, silahkan pelajari terlebih dahulu defenisi CSS diatas, dan tebak akan bewarna apa paragraf “Sedang Belajar CSS…”.
Dan, seperti yang kita lihat, paragraf tersebut tampak berwarna orange, dimana selector CSS “#aaa” adalah tempat pendefenisisan warna “color:orange”, namun bagaimana ini bisa terjadi?
CSS memiliki aturan tertentu tentang hal ini, yaitu ketika sebuah property dari CSS, saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang.
Aturan ke-spesifik-an CSS dihitung menggunakan 4 digit, contohnya: 0,1,0,0. Perhitungannya sama seperti hitung-hitungan kita sehari-hari, dimana 0,1,0,0 lebih besar dari 0,0,1,5.
  1. Setiap element/tag selector bernilai 0,0,0,1
  2. Setiap class selector, attribut selector bernilai 0,0,1,0
  3. Setiap ID selector bernilai 0,1,0,0
  4. Setiap inline style bernilai 1,0,0,0
Dengan menggunakan aturan tersebut, mari kita hitung angka ke-spesifik-an dalam contoh sebelumnya.
  1. Selector p, hanya terdiri dari 1 tag selector, maka nilainya: 0,0,0,1
  2. Selector div p, terdiri dari 2 tag selector, maka nilainya: 0,0,0,2
  3. Selector #aaa, terdiri dari 1 ID selector, maka nilainya: 0,1,0,0
  4. Selector body div p, terdiri dari 3 tag selector, maka nilainya: 0,0,0,3
  5. Selector div p.kalimat, terdiri dari 1 class selector dan 2 tag selector, maka nilainya: 0,0,1,2
Dari hasil yang kita peroleh, maka selector #aaa memiliki nilai paling tinggi, yaitu 0,1,0,0. Maka, karena itulah paragraf dalam contoh spesifik.html akan bewarna orange.
Namun sering kali dalam merancang sebuah website yang cukup kompleks, kita akan sering dibuat pusing dan bertanya-tanya kenapa style yang telah ditulis tidak merubah kode HTML yang ada. Memahami aturan prioritas dan ke-spesifik-an CSS ini sangat penting untuk menghindari hal tersebut.

Mengenal perintah !important

Jika aturan prioritas diatas tidak cukup, CSS menyediakan “senjata” pamungkas, yaitu menggunakan perintah !important.
Perintah !important diletakkan di belakang propery dari CSS, dan perintah !important ini akan mengabaikan urutan prioritas CSS diatas. Mari kita ubah spesifik.html dengan menambahkan !important.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Spesifik CSS !important</title>
<style type="text/css">
p {
color:red !important;
}
div p {
color:green;
}
#aaa{
color:orange;
}
body div p {
color:yellow;
}
div p.kalimat {
color:<span id="e3csfs408382_7" class="e3csfs408382">silver</span>;
}
</style>
</head>
<body>
<div>
<p id="aaa" class="kalimat">
Sedang Belajar CSS...
</p>
</div>
</body>
</html>
Perhatikan akhir baris pada selector p, saya menambahkan perintah !important diakhir property, dan seperti yang bisa ditebak, paragraf kita sekarang akan berwarna merah.

Penggunaan !important sebaiknya digunakan jika memang sudah terdesak, dan sedapat mungkin dihindari, karena akan mengubah urutan prioritas, dan akan menyulitkan perancangan CSS,
bisa dikatakan perancangan kode CSS sebenarnya lebih condong ke seni daripada pemograman, karena selain memikirkan bagaimana tampilan web, kita juga harus memperhatikan aturan prioritas dan ke-spesifik-an CSS tersebut.

 Selanjutnya, kita akan membahas Sifat Penurunan Dalam CSS, atau sering disebut juga dengan Inheritance dalam CSS.

Semoga dapat bermanfaat, terima kasih.
Label:
Share:

No comments

Subscribe to: Post Comments ( Atom )