Pada tutorial sebelumnya kita telah belajar mengenai urutan prioritas selector css dari sumber kode css yang ditulis, nah dalam tutorial kali ini kita akan membahas mengenai urutan prioritas kode yang dilihat dari kespesifikan selector css.
Baik langsung saja sebagai contoh kita akan membuat kode css yang digunakan untuk merubah warna text pada tag <h1>, skripnya seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Prioritas CSS Spesifik</title>
<style type="text/css">
h1
{
color:green;
}
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>dalam kode html dan css diatas, kita mencoba untuk merubah warna text pada tag <h1> dengan menggunakan beberapa selector secara bersamaan, selector yang kita digunakan adalah :
- selector h1 yang berarti langsung mencari objek yang menggunakan tag <h1>, dan merubah warna textnya menjadi hijau
- selector div h1 yang berarti mencari objek yang menggunakan tag <h1> di dalam tag <div>, dan merubah warna textnya menjadi merah
- ID Selector #testing yang berarti mencari objek yang menggunakan ID “testing”, dan merubah warna textnya menjadi warna biru
- selector body div h1 yang berarti mencari objek yang menggunakan tag <h1> di dalam tag <div> dan berada di tag <body>, dan merubah merubah warna textnya menjadi kuning
- menggunakan inline style, yang langsung ditulis di dalam tag <h1> dan mengganti warna textnya dengan warna orange
5 selector diatas mencoba untuk memanipulasi tag <h1> secara bersamaan.
Pertanyaannya : text dalam tag <h1> akan berubah menjadi warna apa ??
baik langsung saja kita simpan skrip diatas dengan nama semisal prioritas_css.html, lalu kita buka di browser.
dan ternyata warna yang digunakan adalah warna orange, berarti yang digunakan adalah kode css dengan mode inline style.
Pertanyaannya ?? kok bisa seperti itu..
Apakah ada perhitungan dalam penentuan setiap selector css yang digunakan ???
Jawabannya ada, baik kita coba bahas detail perhitungannya.
Cara Menghitung nilai Selector CSS
Terdapat Formula yang digunakan untuk menghitung nilai dari selector CSS, jika memang dalam sebuah kondisi terdapat beberapa selector yang mencoba untuk merubah tampilan sebuah objek secara bersamaan seperti contoh kode diatas ada 5 selector yang bersama – sama mencoba merubah warna text di tag <h1>.
Nah anda perlu formula berikut ini untuk mengetahui nilai dari masing – masing selector, sehingga mengetahui selector css mana yang lebih dominan dalam merubah tampilan sebuah objek jika dipanggil secara bersamaan.
Aturan perhitungan ini nantinya memiliki nilai 4 digit, seperti contohnya : 1,0,0,0
Nilai ini sama seperti perhitungan biasanya dimana 0,1,0,0 akan dihitung lebih besar dari pada 0,0,9,9 atau teman – teman juga bisa menghilangkah tanda komanya.
Sehingga bisa kita ketahui bahwa angka 0100 lebih besar daripada 0099.
Perhitungan dari nilai selector css adalah sebagai berikut ini :
- Setiap inline style bernilai 1,0,0,0
- Setiap ID Selector bernilai 0,1,0,0
- Setiap Class Selector, Attribute Selector bernilai 0,0,1,0
- Setiap Element/tag selector bernilai 0,0,0,1
Bagaimana masih bingung kah ??
Kita coba menghitung beberapa selector yang telah kita tulis di contoh diatas :
- h1 berarti memiliki nilai 0,0,0,1
- div h1 memiliki nilai 0,0,0,2
- #testing memiliki nilai 0,1,0,0
- body div h1 memiliki nilai 0,0,0,3
- inline style memiliki nilai 1,0,0,0
Nah dari perhitungan diatas yang menyebabkan warna text pada tag <h1> menjadi warna orange, karena inline style memiliki nilai yang paling besar daripada selector lainnya.
untuk lebih memperjelas kita akan mencoba mengurutkan dan menghilangkan beberapa selector yang memiliki nilai lebih tinggi :
- inline style memiliki nilai 1,0,0,0
- #testing memiliki nilai 0,1,0,0
- body div h1 memiliki nilai 0,0,0,3
- div h1 memiliki nilai 0,0,0,2
- h1 berarti memiliki nilai 0,0,0,1
secara urutan nilai maka daftarnya seperti diatas, pertama adalah inline style, lalu kedua adalah selector ID, maka kita akan coba menghapus bagian inlinenya stylenya apakah memang selector yang dominan kedua adalah Selector ID :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_cssku.css">
<title>Prioritas CSS Spesifik</title>
<style type="text/css">
h1
{
color:green;
}
div h1
{
color:red;
}
#testing
{
color:blue;
}
body div h1
{
color:yellow;
}
</style>
</head>
<body>
<div>
<h1 id="testing">Ini adalah text dengan H1</h1>
</div>
</body>
</html>lalu kita simpan lagi, dan kita buka di browser, maka hasilnya adalah sebagai berikut :
tag <h1> berwarna biru, karena yang memiliki nilai tertinggi saat ini adalah selector ID, karena inline style telah kita hapus.
Berikutnya kita coba menghapus selector ID, sehingga skripnya menjadi seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_cssku.css">
<title>Prioritas CSS Spesifik</title>
<style type="text/css">
h1
{
color:green;
}
div h1
{
color:red;
}
body div h1
{
color:yellow;
}
</style>
</head>
<body>
<div>
<h1 id="testing">Ini adalah text dengan H1</h1>
</div>
</body>
</html>lalu kita simpan lagi, dan buka di browser maka hasilnya adalah :
maka textnya berganti berwarna kuning, karena selector yang memiliki nilai paling tinggi sekarang adalah
body div h1
{
color:yellow;
}karena Selector dengan ID telah kita hapus.
Baik berikutnya kita akan hapus selector body div h1, sehingga skripnya adalah seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_cssku.css">
<title>Prioritas CSS Spesifik</title>
<style type="text/css">
h1
{
color:green;
}
div h1
{
color:red;
}
</style>
</head>
<body>
<div>
<h1 id="testing">Ini adalah text dengan H1</h1>
</div>
</body>
</html>kita akan simpan di kita buka di browser, maka hasilnya adalah :
maka warnanya menjadi warna merah, karena selector css yang memiliki nilai paling tinggi adalah
div h1
{
color:red;
}Terakhir ketika kita menghapus selector div h1, skripnya menjadi seperti berikut ini :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_cssku.css">
<title>Prioritas CSS Spesifik</title>
<style type="text/css">
h1
{
color:green;
}
</style>
</head>
<body>
<div>
<h1 id="testing">Ini adalah text dengan H1</h1>
</div>
</body>
</html>lalu kita akan simpan dan buka di browser hasilnya adalah sebagai berikut :
textnya berwarna hijau karena memang selector yang tersisa hanyalah
h1
{
color:green;
}Bagaimana teman – teman mudah bukan ??
untuk menghitung nilai dari selector CSS, anda cukup menghitung nilai dari masing – masing selector, Sekian dulu tutorial mengenai urutan prioritas selector css menurut kespesifikan selector, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sampai jumpa di tutorial berikutnya.