Prioritas Selector CSS (Cascading)

CSS

Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam tutorial mengenal Urutan Prioritas Selector CSS ini kita akan membahas urutan atau prioritas dari kode CSS yang akan dipakai oleh tag HTML, atau dikenal dengan istilah Cascading.

Pengertian Cascading dari CSS

CSS adalah singkatan dari Cascading Style Sheet, dimana cascade dalam bahasa inggris dapat berarti air terjun kecil yang berjatuhan dari atas ke bawah. Di dalam CSS, maksud dari cascading ini adalah style yang dapat ditimpa atau menimpa style lain sesuai urutannya, atau kita sebut saja sebagai prioritas CSS.

Mengenai kata “prioritas” untuk kode CSS, saya akan bagi menjadi 2 bagian, pada artikel ini hanya akan membahas tentang prioritas atau urutan dari kode CSS jika dilihat dari “sumber” kode tersebut. Kita akan menguji prioritas dari external style sheet, internal style sheet, dan inline style CSS. Pada tutorial berikutnya kita akan membahas tentang prioritas CSS dilihat dari kespesifikannya.

Efek Cascading berdasarkan sumber kode CSS

Misalkan kita memiliki sebuah tag header <h2>, lalu ingin membuat kode CSS menggunakan external style sheet untuk merubah tag header tersebut menjadi biru. Namun pada saat yang sama kita  juga membuat internel style sheet untuk mengubahnya menjadi warna merah, maka warna apakah yang akan tampil di browser?

Untuk mengujinya, marilah kita mencobanya secara langsung, langkah pertama, buatlah sebuah file CSS yang akan diimport, misalkan prioritas.css, ketikkan kode CSS berikut:

1code-line:1-12code-line:1-23code-line:1-3h2 {
    color:blue;
   }

Lalu sebagai sample HTML, saya menggunakan prioritas.html, savelah kedua file pada folder yang sama:

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-22<!DOCTYPE html>
<html>
<head>
   <title>Contoh Kasus Cascading CSS</title>
   <link rel="stylesheet" type="text/css" href="prioritas.css">         
   <style type="text/css">
            h2 {
               color:red;
               }
    </style>
</head>
 
<body>
   <h2>
       Akan berwarna apa saya?..1
   </h2>
 
   <h2 style="color:green">
       Akan berwarna apa saya?..2
   </h2>
</body>
</html>

Perhatikan bahwa sebelum tag <style>, saya “memanggil” file prioritas.css terlebih dahulu. Lalu pada tag <h2> yang kedua saya menambahkan atribut “color:green” pada tag <h2>.

Jika kita menjalankan kode HTML diatas, warna text pada kedua tag <h2> akan bewarna merah dan biru, dan tidak ada yang bewarna biru.

Dari contoh sederhana diatas, tag <h2> sebenarnya “dikenakan” atau “diubah” oleh 3 property CSS yang sama secara bersamaan, yakni ketiga selector tersebut ingin mengubah warna text dari tag <h2>, namun hanya ada satu kode yang akan “menang”.

Dalam masalah ‘timpa-menimpa’ ini,  CSS memiliki aturan prioritas tersendiri. Jika terdapat property CSS yang saling ‘bentrok’,  maka urutan prioritasnya adalah sebagai berikut (dari yang paling kuat):

  • 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

Maka jika melihat sekali lagi kode HTML diatas, text “Akan berwana apa saya?..1” akan berwarna merah karena internal style color:red lebih mendapat prioritas lebih tinggi daripada external style color:red.

Sedangkan text “Akan berwana apa saya?..2” berwarna hijau karena inline style color:green lebih mendapat prioritas daripada external style color:blue maupun internal style color:red.

Selain prioritas antar “sumber” kode CSS tersebut, proses cascading atau prioritas CSS juga masih berlanjut untuk kode CSS dalam file yang sama.

Prioritas Selector CSS (Specificity)

Agar lebih mudah dipahami, saya akan langsung membuat file sample kita, yaitu spesifik.html :
1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-1011code-line:3-1112code-line:3-1213code-line:3-1314code-line:3-1415code-line:3-1516code-line:3-1617code-line:3-1718code-line:3-1819code-line:3-1920code-line:3-2021code-line:3-2122code-line:3-2223code-line:3-2324code-line:3-2425code-line:3-2526code-line:3-2627code-line:3-2728code-line:3-2829code-line:3-2930code-line:3-3031code-line:3-31<!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.

sekian dulu akan kita sambung di posting yang berikutnya semoga bermanfaat...

Artikel Terkait

  • Penggunaan Selector CSS
    Anggap saja  kita telah mengenal 5 jenis selector dalam CSS, yaitu Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute Selector. Selector tersebut tidak hanya berdiri sendiri, namun dapat digabung menjadi sebuah selector yang lebih spesifik. CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menja…
  • Thread komen blogger dengan commentDay
    gaya commentDay adalah gaya untuk standar Blogger Thread comment. Dengan gaya ini komentar default thread comment blogger lebih menjadi terlihat menarik. Gaya ini dirancang sesuai dengan gaya yang telah lama dicari yaitu: sederhana, jelas dan modern. Demo untuk memasang gaya thread komen ini, ikuti langkah berikut: Tambahkan kode be…
  • Edit CSS tanpa masuk ke dalam Edit HTML
    Setiap blogger memang selalu berhubungan dengan CSS terutama dalam gaya tampilan untuk template, terkadang dalam meng-edit CSS kita kerap melakukan hal yang terkadang membuang waktu dan kurang berguna yaitu membuka editor html dan menyimpan CSS secara berulang - ulang. hal ini kita lakukan bukan karena tanpa alasan, selain untuk menciptakan ta…
  • Jenis-jenis Selector Dasar CSS
    CSS memiliki jenis selector yang bervariasi, bahkan sangat beragam tergantung kebutuhan kita untuk mendesain halaman web. Dalam tutorial mengenal dasar selector CSS ini saya akan membahas 5 jenis selector dasar di dalam CSS. Selector CSS tidak hanya 5 jenis ini, namun dalam kebanyakan kasus sudah mencukupi untuk membuat sebuah halaman web HTML…
  • Menghitung ke-spesifik-an Selector
    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…
  • Membuat efek gelembung dengan pure CSS
    Efek speech bubbles adalah efek yang populer saat ini, tetapi banyak tutorial mengandalkan presentasi HTML atau JavaScript dalam pembuatannya. Tutorial ini berisi panduan membuatnya yang dibuat menggunakan dengan CSS dan ditingkatkan dengan CSS3. Tidak ada gambar, tidak ada JavaScript dan dapat diterapkan untuk HTML semantik yang ada. Efek i…

Tidak ada komentar :


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...