Urutan Prioritas Selector CSS (Specificity)

Luthfi blc 9/06/2018
A. Pendahuluan

                                                          Assalamualaikum wr.wb

Oke bertemu lagi dengan saya , kali ini saya akan membahas tentang urutan prioritas selector CSS (specificity)



B. Latar belakang

     pada artikel kali ini kita akan melihat urutan prioritas kode CSS jika seluruh kode CSS tersebut berada dalam file yang sama. 

 C. Maksud dan tujuan 

     ingin tahu urutan prioritas selector CSS (specificity)

 D. Waktu pelaksanaan 

          2 jam

 E. Pembahasan 

  

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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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 definisi CSS diatas. 

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:
  1. Setiap element/tag selector bernilai 0,0,0,1
  2. Setiap class selector, attribut selector bernilai 0,0,1,0
  3. Setiap ID selector bernilai 0,1,0,0
  4. Setiap inline style bernilai 1,0,0,0
Dengan menggunakan aturan tersebut, mari kita hitung angka ke-spesifik-an dalam contoh sebelumnya.
  1. Selector p, hanya terdiri dari 1 tag selector, maka nilainya: 0,0,0,1
  2. Selector div p, terdiri dari 2 tag selector, maka nilainya: 0,0,0,2
  3. Selector #aaa, terdiri dari 1 ID selector, maka nilainya: 0,1,0,0
  4. Selector body div p, terdiri dari 3 tag selector, maka nilainya: 0,0,0,3
  5. 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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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.
F. Alat dan bahan
      -laptop
     -charger laptop
      -koneksi internet
G. referensi
H. Penutup 
    oke sekian dari saya bila ada kesalahan saya mintamaaf, semoga bermanfaat
                                                   Wassalamualaikum wr.wb
Tags:

Post a Comment

0 Comments

silahkan berkomentar tentang template ini