Çalıştırılabilir CSS Dokümanları: !important

Q: !important inline stilleri ezer mi?

Evet. !important içeren bir stil dosyası bildirimi, bir style özniteliğindeki normal bir bildirimi yener. Kendisi de !important ile işaretlenmiş inline bir bildirimi ise yenemez.

!important ne yapar

Bir değerin ardına !important eklemek, o bildirimin aynı elementteki aynı özellik için her normal bildirime karşı kazanmasını sağlar. Seçici özgüllüğü ve kaynak sırası artık önemli değildir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>!important</title>
  <style>
    #intro { color: #2563eb; }           /* ID: very specific */
    .warning { color: #f59e0b !important; } /* class, but important */
  </style>
</head>
<body>
  <p id="intro" class="warning">Amber: !important beats the ID selector.</p>
</body>
</html>

!important olmasaydı ID seçici kazanır ve metin mavi olurdu. Görmek için editörde !important ifadesini sil.

Söz dizimi

selector {
  property: value !important;
}

Değerden sonra, noktalı virgülden önce gelir. Kuralın tamamına değil, yalnızca o tek bildirime uygulanır. Kısa yazımlarda da (margin: 0 !important; dört kenarın hepsini important yapar) ve bir style özniteliğinde de çalışır.

Hangisi hangisini yener

Sayfanın yazarının yazdığı stiller için, en zayıftan en güçlüye:

Sıra	Bildirim	Örnek
1	Stil dosyasındaki normal bildirim	`p { color: blue; }`
2	Bir `style` özniteliğindeki normal bildirim	`<p style="color: blue">`
3	Stil dosyasında `!important`	`p { color: blue !important; }`
4	Bir `style` özniteliğinde `!important`	`<p style="color: blue !important">`

Aynı sıranın içinde özgüllük karar verir, sonra bildirimlerin görünme sırası: sonraki kazanır.

!important'ın meşru tek gündelik kullanımı budur: düzenleyemediğin inline bir stili, örneğin üçüncü taraf bir widget'ın yazdığı bir stili ezmek.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Beat inline</title>
  <style>
    .widget { background: #16a34a !important; }
    .widget-plain { background: #16a34a; }
    div { color: white; padding: 10px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="widget" style="background: #2563eb;">Green: stylesheet !important beats inline.</div>
  <div class="widget-plain" style="background: #2563eb;">Blue: a normal rule loses to inline.</div>
</body>
</html>

İki bildirim de !important olduğunda

!important ile !important karşılaştığında olağan kurallara dönülür: yüksek özgüllük kazanır, eşitlikte sonraki bildirim kazanır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Two important</title>
  <style>
    p { padding: 8px; color: white; }
    .card p { background: #2563eb !important; }  /* (0,1,1) */
    p.note { background: #f59e0b !important; }  /* (0,1,1), later */
    p { background: #16a34a !important; }       /* (0,0,1) */
  </style>
</head>
<body>
  <div class="card"><p class="note">Amber: same specificity, later rule.</p></div>
  <p>Green: only the type rule matches.</p>
</body>
</html>

!important böyle tırmanır: bir kural onu kullandığında, onu ezmesi gereken kural da kullanmak zorunda kalır ve özgüllük yeniden artmaya başlar.

Tek tabloda CSS özgüllüğü

Özgüllük bir seçicinin ağırlığıdır. Üç sayı say:

Sütun	Ne sayılır	Örnek seçici	Özgüllük
A	ID seçiciler	`#nav`	(1,0,0)
B	Class'lar, öznitelikler, sözde sınıflar	`.btn`, `[type="text"]`, `:hover`	her biri (0,1,0)
C	Tür seçicileri, sözde elementler	`p`, `::before`	her biri (0,0,1)
yok	`*`, birleştiriciler (`>`, `+`, `~`, boşluk)	`*`, `ul > li`	hiçbir şey eklemez

Önce A sütununu karşılaştır; yalnızca eşitlikte B'ye, sonra C'ye bak. Böylece #nav a (1,0,1), .menu .item .link a (0,3,1) seçicisini yener: tek bir ID, kaç tane olursa olsun class'lardan ağır basar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #nav a { color: #16a34a; }                /* (1,0,1) wins */
    .menu .item .link a { color: #f59e0b; }  /* (0,3,1) */
    a { color: #2563eb; }                     /* (0,0,1) */
  </style>
</head>
<body>
  <nav id="nav" class="menu">
    <div class="item"><span class="link"><a href="#">Green link</a></span></div>
  </nav>
</body>
</html>

Bu tabloyu anlamak !important'tan kaçınmanı sağlar: "CSS'im uygulanmıyor" sorunlarının çoğu başka bir yerdeki daha özgül bir kuraldır; DevTools Styles panelinde senin bildiriminin üstü çizili olarak görünür.

Daha temiz alternatifler

Özgüllüğü eşitle, sonra sıraya güven. Stil dosyanı kütüphaneninkinden sonra yükle ve en az onun kadar özgül bir seçici kullan.
Diğer kuralın özgüllüğünü :where() ile düşür. :where() içindeki her şey sıfır sayılır, bu yüzden onunla yazılan temel stiller kolayca ezilir.
Kanca olarak bir CSS değişkeni kullan. var(--btn-bg) okuyan bir bileşen, seçicileriyle kavga etmeden temalanabilir. Bkz. CSS değişkenleri.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>where</title>
  <style>
    /* base styles with zero specificity */
    :where(#app .panel) { background: #e5e7eb; padding: 10px; }

    /* a plain class is enough to override */
    .highlight { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="app">
    <div class="panel">Gray base style.</div>
    <div class="panel highlight">Amber, no !important needed.</div>
  </div>
</body>
</html>

JavaScript ile !important ayarlamak

element.style.color = 'red !important' çalışmaz: değer geçersizdir ve yok sayılır. Üçüncü bir argümanla setProperty kullan:

el.style.setProperty('color', '#f59e0b', 'important');

Sık yapılan hatalar

Yanlış yere koymak. color: !important red; geçersizdir; değerden sonra gelir.
@keyframes içinde kullanmak. Keyframe'lerin içinde !important ile işaretlenmiş bildirimler yok sayılır.
Her çakışmayı onunla çözmek. Bunun yerine kazanan kuralı DevTools'ta bul ve onun özgüllüğünü eşitle ya da düşür.
Başka bir özelliği etkilemesini beklemek. color: red !important, background için hiçbir şey yapmaz.
Inline !important'ın seninkini yendiğini unutmak. Sayfanın stil dosyalarındaki hiçbir kural style="color: red !important" değerini ezemez; özniteliğin kendisini, örneğin JavaScript ile değiştir.

Sıkça Sorulan Sorular

CSS'te !important ne işe yarar?

Bir bildirime, aynı elementteki aynı özellik için seçici özgüllüğünden ve sıradan bağımsız olarak her normal bildirimin önünde öncelik verir. Değerden sonra yaz: color: red !important;.

!important nasıl ezilir?

Daha yüksek özgüllüğe sahip ya da aynı özgüllükte olup stil dosyasında daha sonra gelen başka bir !important bildirimiyle. !important içeren inline bir style, stil dosyasındaki her !important'ı yener.

!important inline stilleri ezer mi?

Evet. !important içeren bir stil dosyası bildirimi, bir style özniteliğindeki normal bir bildirimi yener. Kendisi de !important ile işaretlenmiş inline bir bildirimi ise yenemez.

!important kullanmak kötü bir uygulama mı?

Bir özgüllük kavgasını kazanmak için kullanılıyorsa evet: bir sonraki ezme de !important ister ve stil dosyası zor değişir hale gelir. Her zaman uygulanması gereken yardımcı class'lar (.hidden gibi), üçüncü taraf inline stilleri ezmek ve kullanıcı stil dosyaları için makuldür.

CSS özgüllüğü nasıl hesaplanır?

Üç sütun say: ID seçiciler, sonra class'lar, öznitelikler ve sözde sınıflar, sonra tür seçicileri ve sözde elementler. Baştan başlayarak sütun sütun karşılaştır; böylece #nav a (1,0,1), .menu .item a (0,2,1) seçicisini yener. Evrensel seçici * ve birleştiriciler hiçbir şey eklemez.

İlgili kavramlar