Ausführbare CSS-Docs: CSS !important

Q: Wie überschreibt man !important?

Mit einer anderen !important-Deklaration, die spezifischer ist oder bei gleicher Spezifität weiter hinten im Stylesheet steht. Ein Inline-style mit !important schlägt jedes !important im Stylesheet.

Q: Überschreibt !important Inline-Styles?

Ja. Eine Stylesheet-Deklaration mit !important schlägt eine normale Deklaration in einem style-Attribut. Gegen eine Inline-Deklaration, die selbst !important hat, kommt sie nicht an.

Was !important macht

Wenn du !important hinter einen Wert schreibst, gewinnt diese Deklaration gegen jede normale Deklaration für dieselbe Eigenschaft am selben Element. Spezifität und Reihenfolge im Quelltext spielen dann keine Rolle mehr.

<!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>

Ohne !important würde der ID-Selektor gewinnen und der Text wäre blau. Lösch !important im Editor, um es zu sehen.

Syntax

selector {
  property: value !important;
}

Es steht nach dem Wert und vor dem Semikolon. Es gilt nur für diese eine Deklaration, nicht für die ganze Regel. Es funktioniert auch in Kurzschreibweisen (margin: 0 !important; macht alle vier Seiten important) und in einem style-Attribut.

Was schlägt was

Für Styles, die der Autor der Seite schreibt, vom schwächsten zum stärksten:

Rang	Deklaration	Beispiel
1	Normale Deklaration in einem Stylesheet	`p { color: blue; }`
2	Normale Deklaration in einem `style`-Attribut	`<p style="color: blue">`
3	`!important` in einem Stylesheet	`p { color: blue !important; }`
4	`!important` in einem `style`-Attribut	`<p style="color: blue !important">`

Innerhalb eines Rangs entscheidet die Spezifität, danach die Reihenfolge, in der die Deklarationen stehen: Die spätere gewinnt.

Das ist der eine legitime Alltagseinsatz von !important: einen Inline-Style überschreiben, den du nicht bearbeiten kannst, etwa einen, den ein Widget eines Drittanbieters schreibt.

<!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>

Wenn beide Deklarationen !important sind

Bei !important gegen !important gelten wieder die üblichen Regeln: Die höhere Spezifität gewinnt, und bei Gleichstand gewinnt die spätere Deklaration.

<!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>

So eskaliert !important: Sobald eine Regel es verwendet, muss die Regel, die sie überschreiben soll, es auch verwenden, und die Spezifität beginnt wieder zu steigen.

CSS-Spezifität in einer Tabelle

Spezifität ist das Gewicht eines Selektors. Zähl drei Zahlen:

Spalte	Was zählt	Beispielselektor	Spezifität
A	ID-Selektoren	`#nav`	(1,0,0)
B	Klassen, Attribute, Pseudoklassen	`.btn`, `[type="text"]`, `:hover`	je (0,1,0)
C	Typselektoren, Pseudoelemente	`p`, `::before`	je (0,0,1)
keine	`*`, Kombinatoren (`>`, `+`, `~`, Leerzeichen)	`*`, `ul > li`	zählen nichts

Vergleich zuerst Spalte A; nur bei Gleichstand schaust du auf B, dann auf C. Deshalb schlägt #nav a (1,0,1) auch .menu .item .link a (0,3,1): Eine ID wiegt schwerer als beliebig viele Klassen.

<!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>

Wer diese Tabelle versteht, kommt ohne !important aus: Die meisten Probleme vom Typ „mein CSS greift nicht“ sind eine spezifischere Regel an anderer Stelle, sichtbar im Styles-Panel der DevTools, wo deine Deklaration durchgestrichen ist.

Sauberere Alternativen

Spezifität angleichen, dann auf die Reihenfolge setzen. Lade dein Stylesheet nach dem der Bibliothek und nimm einen mindestens gleich spezifischen Selektor.
Die Spezifität der anderen Regel mit :where() senken. Alles in :where() zählt null, also lassen sich damit geschriebene Basis-Styles leicht überschreiben.
Eine CSS-Variable als Einstiegspunkt nutzen. Eine Komponente, die var(--btn-bg) liest, lässt sich anpassen, ohne gegen ihre Selektoren zu kämpfen. Siehe CSS Variablen.

<!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>

!important aus JavaScript setzen

element.style.color = 'red !important' funktioniert nicht: Der Wert ist ungültig und wird ignoriert. Nimm setProperty mit einem dritten Argument:

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

Häufige Fehler

Es an die falsche Stelle setzen. color: !important red; ist ungültig; es gehört hinter den Wert.
Es in @keyframes verwenden. Deklarationen mit !important innerhalb von Keyframes werden ignoriert.
Jeden Konflikt damit lösen. Such stattdessen in den DevTools die gewinnende Regel und gleiche ihre Spezifität an oder senke sie.
Erwarten, dass es eine andere Eigenschaft beeinflusst. color: red !important bewirkt nichts für background.
Vergessen, dass ein Inline-!important deins schlägt. Keine Regel in den Stylesheets der Seite kann style="color: red !important" überschreiben; ändere das Attribut selbst, zum Beispiel mit JavaScript.

Häufig gestellte Fragen

Was macht !important in CSS?

Es gibt einer Deklaration Vorrang vor jeder normalen Deklaration für dieselbe Eigenschaft am selben Element, unabhängig von Spezifität und Reihenfolge. Du schreibst es hinter den Wert: color: red !important;.

Wie überschreibt man !important?

Mit einer anderen !important-Deklaration, die spezifischer ist oder bei gleicher Spezifität weiter hinten im Stylesheet steht. Ein Inline-style mit !important schlägt jedes !important im Stylesheet.

Überschreibt !important Inline-Styles?

Ja. Eine Stylesheet-Deklaration mit !important schlägt eine normale Deklaration in einem style-Attribut. Gegen eine Inline-Deklaration, die selbst !important hat, kommt sie nicht an.

Ist !important schlechter Stil?

Wenn du es nutzt, um einen Spezifitätskampf zu gewinnen, ja: Die nächste Überschreibung braucht dann ebenfalls !important, und das Stylesheet wird schwer änderbar. Sinnvoll ist es für Utility-Klassen, die immer greifen müssen (etwa .hidden), zum Überschreiben von Inline-Styles aus Drittanbieter-Code und in User-Stylesheets.

Wie wird die CSS-Spezifität berechnet?

Zähl drei Spalten: ID-Selektoren, dann Klassen, Attribute und Pseudoklassen, dann Typselektoren und Pseudoelemente. Verglichen wird Spalte für Spalte von vorn, also schlägt #nav a (1,0,1) .menu .item a (0,2,1). Der Universalselektor * und Kombinatoren zählen nichts.

Verwandte Konzepte