Docs/CSS/Specificity

CSS Specificity

Jika ada konflik style, browser menggunakan specificity untuk menentukan mana yang menang.

Urutan Prioritas (rendah → tinggi)

  • Element selector (p, div) — 0,0,1
  • Class selector (.class) — 0,1,0
  • ID selector (#id) — 1,0,0
  • Inline style — 1,0,0,0
  • !important — mengalahkan semua (hindari!)

Jika specificity sama, yang terakhir ditulis menang.

style.css
Try It →
p.spec {
  color: blue;
}/* 0,1,1 */
  .spec {
  color: green;
}/* 0,1,0 */
  #spec-id {
  color: #F06D5B;
}  /* 1,0,0 - wins! */