CSS Specificity

Spesifisitas (specificity) menentukan aturan CSS mana yang akan diterapkan ketika terdapat konflik antar aturan.

Aturan Prioritas CSS

Urutan prioritas aturan CSS:

1. Inline style (style="...") → Spesifisitas: 1000
2. ID selector (#id) → Spesifisitas: 0100
3. Class, pseudo-class, attribute selector (.class, :hover, [type="text"]) → Spesifisitas: 0010
4. Element & pseudo-element (div, h1, ::before) → Spesifisitas: 0001

Jika dua aturan memiliki spesifisitas sama, maka aturan yang ditulis terakhir yang diterapkan.

Contoh Spesifisitas

<style>
  div {
    color: blue;
  }
 
  .highlight {
    color: green;
  }
 
  #unique {
    color: red;
  }
 
  .highlight#unique {
    color: orange;
  }
 
  [style] {
    color: purple;
  }
</style>
 
<div class="highlight" id="unique" style="color: black;">
  Teks ini mengikuti aturan dengan spesifisitas tertinggi
</div>

Tips Mengelola Spesifisitas

• Gunakan class selector sebisa mungkin.
• Hindari menggunakan terlalu banyak ID di CSS.
• Hindari penggunaan !important kecuali benar-benar diperlukan.
• Gunakan :where() di CSS modern untuk selector tanpa menambah spesifisitas.

Ringkasan

• Spesifisitas membantu CSS memilih aturan yang benar.
• Inline style memiliki spesifisitas paling tinggi.
• Aturan terakhir akan menang jika spesifisitasnya sama.