Pada tutorial belajar CSS kali ini saya akan membahas tentang urutan prioritas selector CSS jika dilihat dari ke-spesifik-an selector yang digunakan, atau di dalam istilah bahasa inggris: "CSS Specificity".
Pengertian ke-spesifik-an selector CSS
Jika pada tutorial sebelumnya kita telah membahas tentang urutan prioritas CSS berdasarkan sumber kode CSS tersebut (dimana inline style memiliki prioritas terkuat), pada artikel kali ini kita akan melihat urutan prioritas kode CSS jika seluruh kode CSS tersebut berada dalam file yang sama. Dalam kasus ini kita akan mempelajari apa yang akan terjadi jika beberapa kode CSS yang dibuat saling menimpa.
Agar lebih mudah dipahami, saya akan langsung membuat file sample kita, yaitu spesifik.html :
<!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, seperti yang kita lihat, paragraf tersebut tampak berwarna orange, dimana selector CSS "#aaa" adalah tempat pendefenisisan warna "color:orange", namun bagaimana ini bisa terjadi? bagaimana dengan ke-4 defenisi lainnya?
Jawabannya: karena selector #aaa dianggap paling spesifik atau paling detail dari ke-5 selector lainnya.
Cara Menghitung ke-spesifik-an Selector CSS
CSS memiliki aturan tertentu tentang ke-spesifik-an selector, 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 formula 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, atau agar lebih mudah nilai 0,1,0,0 bisa ditulis menjadi 0100, dan nilai 0,0,1,5 menjadi 0015.
Berikut adalah 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 menggunakan aturan tersebut, mari kita hitung angka ke-spesifik-an dalam contoh 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 memiliki nilai paling tinggi, yaitu 0,1,0,0. Maka, karena itulah paragraf dalam contoh spesifik.html akan bewarna orange.
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 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">
    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.
Dalam tutorial CSS kali ini, bisa dikatakan bahwa perancangan kode CSS sebenarnya lebih condong ke seni (art) daripada pemograman. Karena selain memikirkan bagaimana tampilan web, kita juga harus memperhatikan aturan prioritas dan ke-spesifik-an CSS, dan mengombinasikannya untuk membuat tampilan website yang indah.
Dalam tutorial CSS selanjutnya, kita akan membahas Sifat Penurunan Dalam CSS, atau sering disebut juga dengan Inheritance dalam CSS, yakni tentang penurunan efek CSS dari sebuah tag kepada tag lainnya.
akhirnya paham juga setelah baca berkali kali, pantesan aja setiap saya mau merubah nilai selector, tapi kok gak ada efex apa apa. mantap nih artikel nya
mas izin copy smua tutorial di website ini ya. :)
Silahkan kan mas, tapi kalau ingin di publish ulang di blog pribadi, mohon cantumkan link sumbernya ke sini ya :)
Saya mau buat buku juga mas boleh gak? Hehe hanya lebih simple saja
Mohon maaf, kalau untuk kepentingan komersil seperti dijadikan buku lalu dijual tidak diizinkan…
Tapi kalau untuk dokumentasi pribadi silahkan…
mas andre kok pas saya tambahin menjadi
#aaa{
color:orange;
font-size:20;
}
font sizenya gak bereaksi apa-apa…hanya warna
gimana tuh?
harusnya ditambahin px dina, jadi kayak gini :
#aaa{
color: orange;
font-size: 20px;
}
oiya kurang px
Hehe, lanjutkan sis :)
saya punya tag <h3> dan tag <div id="about"> keitka saya beri nilai pada selector h3 {color:#fff} dan selector #about {color:#bebbae} warna yg di hasilkan tetep saja warna putih apa yg salah ya mas .. apakah spesifikasi nya seperti itu .. terimakasih
posisi <h3> itu berada di tag <div id="about">
itu kalo id="about" nya di taruh di div.. maka masih kalah dengan tag h3.. karena lokasi h3 lebih deket ke tulisannya daripada yg div, walau itu bntuuknya id.. coba id nya ditaruh didalam tag h3 kyak gini..
<h3 id="about">ini berubah warna</h3> nah,, baru deh tulis css nya.. krna ini trmasuk kdalam inline style.. jadi langsung masuk kdalam tagnya.. klo udah di taruh di div itu udah agak kluar tag intinya..
Terimakasih tambahannya mas agus :)
wah, , bagus banget mas. semuanya mudah di mengerti, izin copas ya!
disini terjadi penggunaan tag DIV, dan kurang di sebutkan maksud penggunaan tag DIV, karena di artikel sub sebelum nya tag DIV tidak pernah di gunanakn dan tidak pernah di ulas..
terima kasih kontribusi nya
Rito Alit
Tag <div> merupakan bagian dari HTML. Sebelum masuk ke tutorial CSS, sebaiknya belajar HTML terlebih dahulu, karena materi CSS adalah lanjutan dari HTML.
Tutorial tentang tag div saya bahas disini: https://www.duniailkom.com/belajar-html-pengertian-tag-span-dan-div/
Jadi penasaran isi ebook undercovernya. Pastinya lebih lengkap ya
Yup, betul. Kalau dibandingkan, kira2 30% saja materi yang ada di website duniailkom. 70%-nya hanya ada di eBook.
Sebagai contoh, di eBook CSS Uncover nanti akan dibahas tentang CSS Positioning, CSS3 Gradient, CSS3 Transform, CSS3 Animation, hingga membuat web responsive.
Bp. Andre,
di contoh spesifik.html
<p id="aaa">
di contoh !important
<p id="aaa" class="kalimat">
Oh ya, sebenarnya penambahan class tersebut tidak berpengaruh, tapi agar tidak bingung akan saya hapus tambahan class="kalimat".
Maaf Pak nanya, ebook nya dalam bentuk pdf atau format lain?
harga per ebooknya 50k?
terimakasih
Betul, dalam format pdf dan juga epub (nanti dapat keduanya). Untuk harga eBook beda2, mulai dari 40k – 60k, lengkapnya bisa kesini: https://www.duniailkom.com/cara-pembelian-ebook-dan-buku-duniailkom/