Pengertian ke-spesifik-an selector CSS
Jika pada tutorial sebelumnya kita telah membahas ihwal urutan prioritas CSS menurut sumber isyarat CSS tersebut (dimana inline style mempunyai prioritas terkuat), pada artikel kali ini kita akan melihat urutan prioritas isyarat CSS jikalau seluruh isyarat CSS tersebut berada dalam file yang sama. Dalam masalah ini kita akan mempelajari apa yang akan terjadi jikalau beberapa isyarat CSS yang dibentuk saling menimpa.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Spesifik CSS</title>
<style type="text/css">
p {
color:red;
}
div p {
color:green;
}
#aaa{
color:orange;
}
body 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 perhatikan terlebih dahulu defenisi CSS diatas. Terdapat 5 jenis selector yang �mencoba� untuk merubah warna sebuah paragraf. Dan silahkan tebak akan bewarna apa paragraf �Sedang Belajar CSS��.
Dan, menyerupai yang kita lihat, paragraf tersebut tampak berwarna orange, dimana selector CSS �#aaa� yaitu daerah pendefenisisan warna �color:orange�, namun bagaimana ini sanggup terjadi? bagaimana dengan ke-4 defenisi lainnya?
Jawabannya: sebab selector #aaa dianggap paling spesifik atau paling detail dari ke-5 selector lainnya.
Cara Menghitung ke-spesifik-an Selector CSS
CSS mempunyai hukum tertentu ihwal ke-spesifik-an selector, yaitu dikala sebuah property dari CSS, saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang.
Aturan ke-spesifik-an CSS dihitung memakai formula 4 digit, contohnya: 0,1,0,0. Perhitungannya sama menyerupai hitung-hitungan kita sehari-hari, dimana 0,1,0,0 lebih besar dari 0,0,1,5, atau biar lebih gampang nilai 0,1,0,0 sanggup ditulis menjadi 0100, dan nilai 0,0,1,5 menjadi 0015.
Berikut yaitu nilai CSS Specificity untuk selector di dalam CSS:
- Setiap element/tag selector bernilai 0,0,0,1
- Setiap class selector, attribut selector bernilai 0,0,1,0
- Setiap ID selector bernilai 0,1,0,0
- Setiap inline style bernilai 1,0,0,0
Dengan memakai hukum tersebut, mari kita hitung angka ke-spesifik-an dalam referensi sebelumnya.
- Selector p, hanya terdiri dari 1 tag selector, maka nilainya: 0,0,0,1
- Selector div p, terdiri dari 2 tag selector, maka nilainya: 0,0,0,2
- Selector #aaa, terdiri dari 1 ID selector, maka nilainya: 0,1,0,0
- Selector body div p, terdiri dari 3 tag selector, maka nilainya: 0,0,0,3
- 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 mempunyai nilai paling tinggi, yaitu 0,1,0,0. Maka, sebab itulah paragraf dalam referensi spesifik.html akan bewarna orange.
Sering kali dalam merancang sebuah website yang cukup kompleks, kita akan sering dibentuk pusing dan bertanya-tanya kenapa style yang telah ditulis tidak merubah isyarat HTML yang ada, atau tidak berefek apa-apa. Mungkin jawabannya yaitu nilai selector tersebut tertimpa oleh nilai selector lain yang lebih spesifik. Memahami hukum prioritas dan ke-spesifik-an CSS ini sangat penting untuk menghindari hal tersebut.
Mengenal perintah !important
Jika hukum prioritas diatas tidak cukup, CSS menyediakan �senjata� pamungkas, yaitu memakai perintah !important.
Perintah !important diletakkan di belakang propery dari CSS, dan perintah !important ini akan mengambil alih urutan prioritas CSS yang kita pelajari diatas. Mari kita ubah spesifik.html dengan menambahkan perintah !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:silver;
}
</style>
</head>
<body>
<div>
<p id="aaa" class="kalimat">
Sedang Belajar CSS...
</p>
</div>
</body>
</html>
Perhatikan tamat baris pada selector p, aku menambahkan perintah !important diakhir property, dan menyerupai yang sanggup ditebak, paragraf kita kini akan berwarna merah.
Penggunaan perintah !important sebaiknya dipakai jikalau memang sudah terdesak dan sedapat mungkin dihindari,. Hal ini sebab perintah !important akan mengubah urutan prioritas dan akan menyulitkan perancangan CSS.
Sumber http://informasigameindo11.blogspot.com
EmoticonEmoticon