CSS priority: Mengetahui Konfigurasi CSS yang Dipilih oleh Browser

TARGET

Mengetahui mana konfigurasi CSS yang akan digunakan oleh browser terkait elemen tertentu.

PENGANTAR

Pada konfigurasi CSS, suatu properti terkait elemen tertentu mungkin terdapat pada lebih dari 1 blok kode. Perhatikan contoh CSS berikut:

      
      p {
        color:blue;
      }
      
      p {
        color:red;
      }

      
		<p>Paragraf</p>

Paragraf

Pada CSS diatas, terdapat 2 blok kode yang mengatur elemen p. Pada setiap blok kode, terdapat properti color yang mengatur warna text. Berkaitan dengan kasus di atas, kode CSS tetap valid (benar), namun browser hanya akan menerapkan 1 konfigurasi yang paling diprioritaskan. Seperti yang terlihat pada tab hasil, browser memilih konfigurasi yang terdapat pada blok kode ke-2 untuk menentukan warna text (red).

Prioritas CSS

Prioritas CSS ditentukan berdasarkan beberapa hal, beberapa hal ini adalah Posisi deklarasi, Kompeleksitas dan tipe selektor, Penempatan deklarasi dan Suffix !important.

Berdasarkan Posisi: Deklarasi paling akhir yang akan diprioritaskan
```
            
            p {
              color:blue;
              text-decoration:underline;
            }

            p {
              color:red;
            }
            
          
```
```
            
            <div>
              <p>Paragraf</p>
            </div>
            
          
```
Paragraf

Pada semua blok kode terdapat property color yang mengatur warna text. Browser akan memiliki property di dalam blok kode yang dideklarasikan paling akhir untuk menentukan warna text (red). Untuk property text-decoration, karena property ini hanya terdapat pada blok kode pertama, nilai ini yang akan diterapkan (underline).

POIN Prioritas CSS adalah aturan browser dalam memilih property yang akan diterapkan (bukan Blok Kode).

Berdasarkan Selektor

Selektor yang lebih komplek akan diprioritaskan.

                
                p {
                  color:blue;
                  text-decoration:underline;
                }

                div p {
                  color:green;
                }

                p {
                  color:red;
                }

                
                <div>
                  <p>Paragraf</p>
                </div>

Paragraf

Property di dalam selektor div p akan diterapkan karena lebih komplek dibandingkan dengan selektor lainnya. Disini, div p dikatakan lebih komplek karena selektor ini terdiri dari 2 item selektor, yaitu div dan p. Tepatnya adalah selektor yang mengarah pada elemen p yang terletak di dalam elemen div.

Berdasarkan tipe selektor, prioritas adalah:
1. Berdasarkan ID (#id)
2. Berdasarkan class (.class) atau atribut ([atribut="value"])
3. Berdasarkan elemen (p)
```
                
                #paragraf{
                  color:blue;
                }
                
                .paragraf {
                  color:green;
                  text-decoration:underline;
                }

                div p {
                  color:red;
                  text-decoration:none;
                }
                
              
```
```
                
                <div>
                  <p id='paragraf' class='paragraf'>Paragraf</p>
                </div>
                
              
```
Paragraf

Pada semua blok kode terdapat property color yang mengatur warna text. Browser akan memiliki property di dalam blok kode dengan tipe selektor yang lebih diprioritaskan. Dalam hal ini adalah berdasarkan ID. Untuk property text-decoration, property ini terdapat pada selektor .paragraf (berdasarkan class) dan div p (berdasarkan elemen/tag), karena tipe selektor berdasarkan class lebih diprioritaskan, maka rule (aturan) yang diterapkan adalah text-decoration:underline

Berdasarkan Penempatan: Deklarasi secara inline akan diprioritaskan

            
              #paragraf{
                color:blue;
              }

              .paragraf {
                color:green;
                text-decoration:underline;
              }

              div p {
                color:red;
                text-decoration:none;
              }

            
                <div>
                  <p id='paragraf' class='paragraf' style='color:orange'>Paragraf</p>
                </div>

Paragraf

Inline CSS adalah style yang langsung dideklarasikan pada elemen. Tipe deklarasi ini memiliki prioritas paling tinggi jika dilihat dari penempatan deklarasi.

Berdasarkan Ketersediaan Suffix: Deklarasi nilai dengan suffix !important akan diprioritaskan

            
              #paragraf{
                color:blue;
              }

              .paragraf {
                color:green;
                text-decoration:underline;
              }

              div p {
                color:red !important;
                text-decoration:none;
              }

            
                <div>
                  <p id='paragraf' class='paragraf' style='color:orange'>Paragraf</p>
                </div>

Paragraf

Satu-satunya tipe deklarasi yang mengalahkan prioritas inline CSS adalah deklarasi dengan suffix !important.

Suffix !important juga bisa diterapkan pada inline CSS. Deklarasi ini memiliki prioritas paling tinggi.

            
              #paragraf{
                color:blue;
              }

              .paragraf {
                color:green;
                text-decoration:underline;
              }

              div p {
                color:red !important;
                text-decoration:none;
              }

            
                <div>
                  <p id='paragraf' class='paragraf' style='color:orange !important'>Paragraf</p>
                </div>

Paragraf

Kesimpulan

Berikut adalah kesimpulan urutan prioritas CSS dimulai dari yang Tertinggi:

Suffix !important
Penempatan deklarasi
Tipe selektor yang digunakan
Kompleksitas selektor
Posisi deklarasi
Default CSS. Yaitu rules CSS yang diterapkan oleh browser untuk elemen tertentu. Setiap browser memiliki rules yang berbeda.