Urutan Prioritas Selector CSS (Specificity) (Part VIII)

Rabu, 08 Februari 2012

Kali ini kita 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 kamu 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?
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.

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, atau tidak berefek apa-apa. Mungkin jawabannya adalah nilai selector tersebut tertimpa oleh nilai selector lain yang lebih spesifik. 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 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 akhir baris pada selector p, saya menambahkan perintah !important diakhir property, dan seperti yang bisa ditebak, paragraf kita sekarang akan berwarna merah.

Penggunaan perintah !important sebaiknya digunakan jika memang sudah terdesak dan sedapat mungkin dihindari,. Hal ini karena perintah !important akan mengubah urutan prioritas dan akan menyulitkan perancangan CSS.

Cowaska

Urutan Prioritas Selector CSS (Specificity) (Part VIII)

Blogpost Rabu, 08 Februari 2012 edit Tags: Belajar CSS