Mengenal Urutan Prioritas Selector di CSS Secara Spesifik

Kuy Belajar - Mengenal Urutan Prioritas Selector di CSS Secara Spesifik. Assalamualaikum sobat semua. Alhamdulillah kita ketemu lagi di blog kuy-belajar, sebelumnya kita sudah membahas materi pertama kita tentang Contoh Cara Penggunaan Selector Dalam CSS kita akan menyambung pembahasan tersebut yaitu dengan materi Mengenal Urutan Prioritas Selector di CSS Secara Spesifik. Sobat sudah penasaran kan? kuy simak pembahasan berikut ini!

Mengenal Cascading dari CSS

Kata 'cascading' ini sendiri merupakan sebuah kepanjangan dari kata CSS atau Cascading style sheet. Cascading jika kita artikan ke dalam bahasa Indonesia yaitu air terjun kecil yang berjatuhan dari atas ke bawah. Maksud dari cascading pada CSS ini sendiri yaitu style yang dapat menimpa atau di timpa style lain sesuai dengan urutan yang kita buat.

Menurut KBBI atau Kamus Besar Bahasa Indonesia,Kata Prioritas berarti yang didahulukan dan diutamakan daripada yang lain. Jadi pada materi ini kita kita akan membahas style seperti apa kah yang akan diprioritaskan oleh CSS itu sendiri.

Pada materi ini, kita akan membagi pembahasan prioritas ini menjadi dua bagian. Yang pertama prioritas berdasarkan "sumber dari CSS tersebut, apakah bersumber dari inline style, internal style, ataupun eksternal style. Dan bagian yang kedua kita akan membahas prioritas berdasarkan ke-spesifik-kan nya.

Mengenal efek cascading berdasarkan sumber CSS

Untuk lebih memahaminya, kita akan langsung membahasnya pada kasus yang biasa nya terjadi pada persoalan seperti materi ini. Misalkan kita ingin membuat sebuah header menggunakan tag <h1>, lalu kita menggunakan inline style yang di beri perintah agar tag h1 tersebut berwarna biru.

Namun pada saat yang bersamaan kita menambahkan internal style untuk merubah tag h1 tersebut menjadi berwarna pink. Dan eksternal style dengan perinta warna teks h1 menjadi berwarna hijau. mungkin sobat bertanya- tanya apakah warna dari tag h1 tersebut?

Untuk memastikannya, kuy kita langsung mengujinya saja. Pertama kita akan membuat sebuah eksternal style, silahkan sobat gunakan kode css berikut, simpan dengan nama style.css atau bisa di beri nama apapun dengan ekstensi .css.

h1 {
    color:#019875;
   }

setelah itu silahkan sobat buat sebuah file HTML

<html>
<head>
   <title>Kuy Belajar Cascading CSS</title>
   <link rel="stylesheet" type="text/css" href="style.css">   
</head>
 
<body>
   <h1>
       teks ini berwarna apa?..1
   </h1>
 
   <h1 style="color:#4183D7">
       teks ini berwarna apa?..2
   </h1>
</body>
</html>

Lalu masukkan kode CSS berikut ini ke dalam file HTML tersebut di antara tag <head> </head>.

 <style type="text/css">
            h1 {
               color:#F62459;
               }
    </style>

Maka akan menghasilkan seperti pada gambar di bawah ini.

Jika kita perhatikan pada gambar di atas, sebelumnya kita terlebih dahulu memasukan inline style pada tag h1 yang berisikan kalimat teks ini berwarna apa?..2. Lalu setelah itu kita menambah kan internal style yang berisi perintah untuk mengubah warna tulisantag h1 menjadi berwarna pink.

Namun setelah file HTML tersebut kita jalankank, pada tag h1 yang berisi kalimat teks ini berwarna apa?..1 akan berubah warna menjadi warna pink sedangkan tag h1 yang berisi kalimat teks ini berwarna apa?..2 akan tetap berwarna biru.

Sebenarnya pada file html tersebut, kita menggunakan 3 metode CSS secara bersamaan, sama sama di beri perintah untuk mengubah warna dari teks tag h1 namun dengan warna yang berbeda-beda, namun di antara ketiga metode tersebut hanya satu yang akan menang.

Dari contoh di atas bisa kita simpulkan bahwa dalam proses timpa menimpa style ini CSS pun memiliki sebuah aturan tersendiri. Jika terdapat style yang bentrok sperti pada contoh di atas, maka urutannya adalah sebagai berikut ini:

Inline style, yakni style yang langsung melekat pada tag.
Internal style, yakni style yang dideklarasikan pada awal halaman (tag <style>)
Eksternal style, yakni style yang dideklarasikan pada sebuah file .css , dan dipanggil melalui tag <link> atau @import

Selanjutnya kita akan membahas tentang prioritas secara spesifik, kuy simak materi berikut!

Mengenal ke-Spesifik-kan Selector CSS

Sebelumnya kita sudah membahas materi prioritas berdasarkan metode style Css. 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.

Kuy simak kode di bawah ini!

<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>

Maka akan menghasilkan seperti pada gambar berikut ini.

Dan, seperti yang kita lihat pada gambar di atas, 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.

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.

<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>

Maka hasilnya seperti pada gambar berikut ini.

Saya rasa itu lah pembahasan kita tentang Mengenal Urutan Prioritas Selector di CSS Secara Spesifik. kita sudah mempelajari fungsi berserta contoh nya masing-masing.

Sekian dulu dari saya "Singkat, Semoga Bermanfaat"

Keep Coding ya sobat!

Kuy ke materi selanjutnya : Mengenal Sifat Inheritance atau Penurunan di CSS