Arti Specificity dalam selector CSS
Sederhananya ini merupakan salah satu jenis prioritas dalam CSS. Maksudnya adalah urutan terkuat dalam sebuah kode CSS apabila kode CSS berada dalam file yang sama. Pembahasan ini menentukan apa yang akan terjadi bila ada beberapa kode CSS yang saling berbenturan/menimpa. Jenis lain dari prioritas ini dikenal dengan Cascading, bisa dibaca pada artikel terkait : Prioritas Cascading dalam CSS.Sekilas saja tentang Cascading, jika Cascading dibahas prioritas berdasarkan letak sumber kode CSS. Maka pada Specificity ini bagaimana jika berada dalam sumber yang sama. Untuk memudahkan bisa dilakukan praktikum berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Spesifik CSS</title>
<style type="text/css">
p {
color:red;
}
div p {
color:green;
}
#bocet{
color:orange;
}
body div p {
color:yellow;
}
div p.kalimat {
color:silver;
}
</style>
</head>
<body>
<div>
<p id="bocet">
CSS Mana Yang Lebih Kuat
</p>
</div>
</body>
</html>
Perhatikan kode yang diwarnai biru. Pada kode tersebut diberikan CSS 5 macam selector. Selector tersebut bertingkat. Dimulai dari paragraf (p) dan dilanjutkan pendefenisian untuk bagian paragraf lebih rinci. Sekarang silahka dijalankan. Apa yang di peroleh?
Penjelasan
Dari hasil di atas ternyata yang menang adalah selector id bocet. Bisa dilihat sendiri yang berwarna orange. Ini dikarenakan selector 'bocet' lebih khusus dibanding selector lain.Untuk menghitung sifat khusus selector pada CSS maka digunakan rumus. Perhitungan dimulai dari ketetapan nilai masing masing selector. Nilai ketetapan tersebut adalah :
Dalam nilai tersebut diusahan menulis dalam 4 digit, agar lebih mudah dalam perhitungan. Sekaran mari dihitung spesifikasi CSS di atas :
- Setiap element/tag selector bernilai 0001
- Setiap class selector, attribut selector bernilai 0010
- Setiap ID selector bernilai 0100
- Setiap inline style bernilai 1000
- Selector p, hanya terdiri dari 1 tag selector, maka nilainya: 0001
- Selector div p, terdiri dari 2 tag selector (div dan p) , maka nilainya: 0002
- Selector #bocet, terdiri dari 1 ID selector, maka nilainya: 0100
- Selector body div p, terdiri dari 3 tag selector (body, div, p), maka nilainya: 0003
- Selector div p.kalimat, terdiri dari 1 class selector (kalimat) dan 2 tag selector (div, p) , maka nilainya: 0012
Dari perhitungan terlihat #bocet yang memiliki nilai paling tinggi. Maka dia pemenang dan diprioritaskan.
Terkadang dalam membuat sebuah desain website, meskipun telah di tulis selector CSS tetapi tampilan yang diinginkan tidak keluar. Ini bisa saja disebabkan karena selector lain lebih diprioritaskan. untuk itu bisa diakali dengan perintah !important.
Perintah !important dalam CSS
Untuk 'memaksa' kode yang tereliminasi oleh selector lain maka digunakan perintah !important. perintah ini ditulis pada bagian belakang property CSS. Dengan perintah ini maka bagian yang diberi !important akan menjadi prioritas utama. Sebagai contoh perhatikan dan jalankan kode di atas, tetapi ditambahkan !important pda selector p. Sehinga menjadi<!DOCTYPE html>
<html>
<head>
<title>Contoh Kasus Spesifik CSS</title>
<style type="text/css">
p {
color:red !important ;font-size: 28px;
}
div p {
color:green;font-size: 25px;
}
#bocet{
color:orange;font-size: 20px;
}
body div p {
color:yellow;font-size: 15px;
}
div p.kalimat {
color:silver;font-size: 8px;
}
</style>
</head>
<body>
<div>
<p id="bocet">
CSS Mana Yang Lebih Kuat
</p>
</div>
</body>
</html>
Bagaimana hasil yang anda peroleh? Dengan penambahan !important di selector p maka tampilan akan berubah menjadi merah, sesuai value p. Nilai #bocet yang seharusnya lebih besar akhirnya dikalahkan oleh !important ini.
Kesimpulan : Jadi yang akan diprioritaskan CSS dalam sebuah selector bertingkat adalah !important - tag/class/id sesuai perhitungan di atas. Bisa dibilang jika memang mentok, tampilan yang diinginkan ditimpal selector lain dan anda bingung. Maka gunakan !important sebagai obat paling mujarab.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment