CSS priority: Mengatahui konfigurasi CSS yang dipilih oleh browser

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

CSSHTMLHasil

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

p {
  color:red;
}

Pada CSS diatas, terdapat 2 blok kode yang mengatur elemen p. Pada setiap blok kode, terdapat properti yang mengatur warna text (color). Berkaitan dengan kasus diatas, 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).

Pada halaman ini, kita akan mengetahui tentang mana konfigurasi CSS yang akan digunakan oleh browser terkait elemen tertentu.

Prioritas CSS ditentukan berdasarkan beberapa hal, beberapa hal ini adalah penempatan, selektor, dan !important suffix pada value.

Prioritas 1: !important suffix

Bowser akan memilih properti yang memiliki suffix (akhiran) !important sebagai prioritas utama.

CSSHTMLHasil

p {
  color:green;
}

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

p {
  color:blue;
}

Bagaimana kalau tidak terdapat satupun properti dengan akhiran !important ?

Browser akan menerapkan aturan selanjutnya yaitu mengecek Inline CSS.

Prioritas 2: Inline CSS

Ketika terdapat inline CSS pada elemen, konfigurasi lainya (Internal dan eksternal) akan diabaikan.

Contoh:

CSSHTMLHasil

p {
  color:blue;
  text-decoration:underline;
}
.myparagraf {
  color:green;
}

Prioritas 3: Selektor yang lebih spesifik

Seberapa spesifik selektor ditentukan oleh jenis selektor itu sendiri serta berapa banyak selektor yang terlibat.

Berdasarkan jenis selektor

Setiap jenis selektor memiliki tingkat (score) prioritas yang berbeda. Berikut adalah tingkatan prioritas berdasarkan jenis selektor.

1. Selektor berdasarkan ID (#id)
2. Selektor berdasarkan class atau atribut (.class atau [atribut="value"])
3. Selektor berdasarkan nama elemen (elemen)

Contoh:

CSSHTMLHasil

#myparagraf {
  color:red;
  text-decoration:underline;
}
.myparagraf {
  color:green;
}

CSSHTMLHasil

.myparagraf {
  color:green;
}
#myparagraf {
  color:red;
  text-decoration:underline;
}

Keterangan Seperti yang terlihat pada tab hasil, konfigurasi yang terpilih adalah konfigurasi yang terdapat pada blok kode dengan selektor berdasarkan ID. Ya, karena selektor berdasarkan ID memiliki prioritas lebih tinggi dibandingkan selektor berdasarkan class, tidak peduli penempatan blok kode, selektor dengan ID akan diterapkan.

Berdasarkan jumlah selektor yang terlibat

Pedefinisian suatu selektor dapat dilakukan secara spesifik dengan cara menggabungkan beberapa selektor yang relevan terkait elemen yang dikehendaki. Terkait prioritas browser, konfigurasi dengan jumlah selektor yang lebih banyak akan diterapkan.

Contoh:

CSSHTMLHasil

.myparagraf {
  color:green;
}
p.myparagraf {
  color:red;
}

Keterangan Pada blok kode pertama, jumlah selektor yang didefinisikan adalah satu (berdasarkan class). Pada blok kode ke-2, jumlah selektor adalah dua (berdasarkan elemen dan class). Sesuai dengan aturan prioritas CSS, karena selektor ke-2 didefiniskan lebih spesifik (lebih banyak selektor yang terlibat), konfigurasi pada blok kode ke-2 akan dipilih.

Prioritas 4: Berdasarkan penempatan

Ketika browser belum mendapatkan prioritas dengan aturan-aturan yang telah diuraikan sebelumnya, aturan selanjutnya yang akan dijalankan adalah melihat penempatan konfigurasi. Dalam hal ini, konfigurasi yang diletakkan paling akhir akan menjadi prioritas.

Contoh:

CSSHTMLHasil

.myparagraf {
  color:green;
  text-decoration:underline;
}
.myparagraf {
  color:red;
}

Keterangan Pada kode diatas, browser akan memilih konfigurasi pada blok kode ke-2, hal ini karena blok kode ke-2 didefinisikan paling akhir.

Prioritas 5: Default CSS

Ketika tidak terdapat konfigurasi yang mengatur elemen tertentu, browser akan menggunakan default CSS dalam mendekorasi elemen. Adapun default CSS ini mungkin berbeda antara browser satu dan browser lainnya.

Share :

Tweet

✚

Related Post