CSS !important: So verwenden Sie die Property

Bei der Gestaltung Ihrer Website können Sie mehrere CSS-Deklarationen auf dasselbe Element anwenden. In diesem Fall bestimmt der Browser, welche Deklarationen für ein Element am relevantesten sind, und wendet diese an.

Diese Relevanz – oder Spezifität – basiert auf den Übereinstimmungsregeln der CSS-Selektoren. CSS-Selektoren sind Attribute, die dem Browser mitteilen, welche Elemente mit dem CSS-Code gestaltet werden sollen. Es gibt verschiedene Selektortypen mit eigener Syntax und einem eigenen Grad an Spezifität.

Bei der Anwendung der Regeln zur CSS-Spezifität gibt es allerdings eine Ausnahme. Es handelt sich dabei um die „!important“-Regel. Bevor wir uns genauer mit der „!important“-Regel auseinandersetzen, wollen wir die Regeln der Spezifizität kurz zusammenfassen. Danach werden wir folgende Themen in diesem Beitrag behandeln:

• Die Bedeutung von „!important“ in CSS
• So nutzen Sie die „!important“-Eigenschaft
• Gründe, warum die „!important“-Regel möglicherweise nicht funktioniert
• So können Sie die „!important“-Eigenschaft überschreiben

Zusammenfassung der CSS-Spezifität

Die folgenden Selektortypen werden von der höchsten bis zur niedrigsten Spezifität gereiht:

1. ID-Selektoren: Diese wählen ein Element basierend auf dem ID-Attribut und haben die Syntax #idname.
2. Klassenselektoren (wählen alle Elemente einer CSS-Klasse aus und haben die Syntax .klassenname), Attributselektoren (wählen alle Elemente aus, die ein bestimmtes Attribut und die Syntax [attr] haben) und Pseudoklassenselektoren (wählen Elemente nur dann aus, wenn sie einen speziellen Status aufweisen, z. B. „visited“ oder „hover“, und haben die Syntax selector:pseudo-class.)
3. Typ-Selektoren: Diese wählen alle HTML-Elemente aus, die einen bestimmten Knotennamen haben und die Syntax element aufweisen.

Anmerkung: Der Universalselektor (*) hat keine Auswirkung auf die Spezifität.

Wenn mehrere Deklarationen mit gleicher Spezifität, z. B. ein Klassenselektor und ein Attributselektor, auf dasselbe Element angewandt werden, wird die letzte Deklaration (d. h. die später im Stylesheet aufgeführte Deklaration) auf das Element angewandt.

Wichtig ist auch, dass Sie bei der HTML- und CSS-Codierung Ihrer Website die „!important“-Regel beachten. Es handelt sich dabei um eine Ausnahme von allen oben genannten Spezifitätsregeln. Sehen wir uns im Folgenden genauer an, was das bedeutet.

Mehrere Eigenschaftswerte zu kombinieren und dabei zahlreiche Spezifitätsregeln zu befolgen, kann sich als kompliziert erweisen. Die Anwendung der „!important“-Eigenschaft ist zwar eine einfachere Alternative, zählt aber keineswegs zu den Best Practices und ist daher meist nicht empfehlenswert. Das liegt daran, dass dadurch die natürliche Kaskade von Stylesheets unterbrochen wird, was die Wartung und Fehlersuche auf Ihrer Website erheblich erschwert.

Es gibt jedoch bestimmte Anwendungsfälle, in denen die Eigenschaft „!important“ die richtige Wahl ist. Ein Beispiel ist die Definition von Utility-Klassen, wie die Klasse „Schaltfläche“ (engl. button class).

Nehmen wir an, Sie möchten, dass jedes Element, das Teil der Klasse „Schaltfläche“ ist, dasselbe Erscheinungsbild aufweist: oranger Hintergrund, weiße Schriftfarbe und durchgehender schwarzer Rahmen. Ohne die Eigenschaft „!important“ würden Sie den folgenden Code verwenden, um einen Link wie eine Schaltfläche aussehen zu lassen.

So sieht das in HTML aus:

 
<a href="#" class="button">Klicken Sie mich an</a>

So sieht das in CSS aus:

 
.schaltfläche {
background: #FF7A59;
color: #FFFFFF;
padding: 5px;
font-size: 50px;
border-radius: 5px;
border: 2px solid black;
}

Und so sieht das Ergebnis aus:

Siehe das Pen-Beispiel Ankerelement mit der Klasse „Schaltfläche“ von Christina Perricone (@hubspot) auf CodePen.

Nehmen wir nun an, dass Sie Ihre Webseite weiter ausbauen. Irgendwann fügen Sie einen neuen Abschnitt mit der ID „inhalt“ (engl. content) zu Ihrem HTML-Code hinzu. Dieser Abschnitt enthält einen weiteren Link mit der Klasse „Schaltfläche“. Außerdem fügen Sie eine weitere Regel zu Ihrer CSS hinzu, die festlegt, dass alle <a>-Elemente mit dem ID-Namen „inhalt“ einen durchgehenden blauen Rahmen haben. Dies ergibt folgenden Code.

So sieht das in HTML aus:

 
<a href="#" class="button">Klicken Sie mich an</a>
<section id="content">
<p> Beispieltext <a href="#" class="button">Klicken Sie mich an</a> </p>
</section>

So sieht das in CSS aus:

 
.schaltflläche {
background: #FF7A59;
color: #FFFFFF;
padding: 5px;
font-size: 50px;
border-radius: 5px;
border: 2px solid black;
}
#inhalt a {
border: 4px solid #00A4BD;
}

Und so sieht das Ergebnis aus:

Siehe das Pen-Beispiel xxgQYKq von Christina Perricone (@hubspot) auf CodePen.

Da ein ID-Selektor eine höhere Spezifität hat als ein Klassenselektor, hat der CSS-Stil des Selektors #inhalt Vorrang gegenüber dem CSS-Stil des Selektors .schaltfläche. Deshalb hat das zweite <a>-Element einen durchgehenden blauen Rahmen und keinen durchgehenden schwarzen.

Ein solches Szenario ist unvermeidlich – egal, ob Sie eine Website von Grund auf neu erstellen oder ein Framework wie Bootstrap CSS verwenden. Je größer das Codevolumen ist, mit dem Sie arbeiten, desto schwieriger ist es, den Überblick über die Spezifität Ihrer CSS-Selektoren zu behalten.

Bei dem oben erwähnten Szenario können Sie Inkonsistenzen in Bezug auf den Stil Ihrer Website vermeiden, indem Sie die Eigenschaft !important verwenden. Im Folgenden werden wir uns ansehen, wie diese Eigenschaft genau zu verwenden ist.

So wird „important“ in CSS verwendet

Die Verwendung der „!important“-Regel in CSS ist einfach. Sie müssen nur !important am Ende der Zeile, unmittelbar vor dem Semikolon, einfügen. Die Syntax würde also wie folgt lauten:

 
   element {
style property !important;
}

Sehen wir uns an, wie sich die CSS-Schreibweise im obigen Beispiel ändert, wenn die Regel „!important“ hinzugefügt wird.

Beispiel für „important“ in CSS

Sie möchten, dass jedes Element, das Teil der Klasse „Schaltfläche“ ist, dasselbe Erscheinungsbild aufweist: oranger Hintergrund, weiße Schriftfarbe und durchgehender schwarzer Rahmen.

Das Problem ist, dass einige Ihrer Anker (oder Links) durch die Klasse „Schaltfläche“ und einen ID-Namen definiert sind. In Ihrem CSS haben Elemente mit diesem ID-Namen einen durchgehenden blauen Rahmen. Da ID-Selektoren spezifischer sind als Klassenselektoren, werden diese Ankerelemente wie eine Schaltfläche mit orangefarbenem Hintergrund und weißer Schriftfarbe gestaltet – sie haben jedoch einen durchgehenden blauen Rand statt eines durchgehenden schwarzen Rands.

Natürlich wollen Sie solche Unstimmigkeiten im Design Ihrer Website vermeiden. Sie verwenden also die Regel „!important“, wenn Sie den CSS-Code für die Klasse „Schaltfläche“ angeben.

Der HTML-Code bleibt derselbe:

 
<a href="#" class="button">Klicken Sie mich an</a>
<section id="content">
<p> Beispieltext <a href="#" class="button">Klicken Sie mich an</a> </p>
</section>

So sieht das in CSS aus:

 
.schaltfläche {
background: #FF7A59 !important;
color: #FFFFFF !important;
padding: 5px !important;
font-size: 50px !important;
border-radius: 5px !important;
border: 2px solid black !important;
}
#inhalt a {
border: 4px dotted #00A4BD;
}

Und so das Ergebnis:

Siehe das Pen-Beispiel Wichtiges CSS-Beispiel von Christina Perricone (@hubspot) auf CodePen.

Sie werden feststellen, dass beide <a>-Elemente dank der „!important“-Regel identisch aussehen.

CSS „important“ funktioniert nicht

Nehmen wir an, dass Sie die „!important“-Regel in Ihrem CSS-Code verwenden, die Elemente aber nicht das gewünschte Erscheinungsbild aufweisen. Es gibt nur wenige Gründe, warum die „!important“-Regel möglicherweise nicht anwendbar ist.

Erstens funktioniert die „!important“-Regel im Stylesheet des Autors nicht, wenn sie im Stylesheet des Benutzenden verwendet wird. Das Autoren-Stylesheet wird vom Autor der Webseite bereitgestellt. Das Benutzer-Stylesheet wird vom Benutzenden des Browsers bereitgestellt. Standardmäßig haben die CSS-Regeln im Autoren-Stylesheet Vorrang gegenüber jenen im Stylesheet des Benutzenden.

Um jedoch ein Gleichgewicht zwischen den Anforderungen von Autorinnen bzw. Autoren und Benutzenden zu schaffen, haben „!important“-Regeln in einem Benutzer-Stylesheet Vorrang gegenüber „!important“-Regeln im Autoren-Stylesheet. Dieses CSS-Merkmal wurde für die Gewährleistung von Barrierefreiheit entwickelt. Benutzende, die größere Schriftarten bzw. bestimmte Farbkombinationen benötigen oder andere Bedürfnisse aufgrund von Sehbehinderungen haben, können die Darstellung einer Webseite steuern.

Es ist auch möglich, dass Sie „!important“ zu einem CSS-Regelsatz hinzugefügt haben, der später im Stylesheet durch einen anderen CSS-Regelsatz mit der „!important“-Regel überschrieben wurde. Möglicherweise haben Sie die Änderung aus Versehen vorgenommen, was erklären würde, warum die „important“-Regel nicht funktioniert – oder Sie haben dies vielleicht absichtlich getan.

Nehmen wir an, dass Sie das Farbschema Ihrer Website ändern wollen oder unterschiedliche Darstellungsweisen für die Elemente der Klasse „Schaltfläche“ festlegen möchten. Unabhängig von Ihren Beweggründen sollten Sie die „!important“-Regel in Ihrem CSS-Code außer Kraft setzen. Sehen wir uns an, wie das geht.

Warum funktionieren diese beiden Methoden? Die Regeln der Spezifizität machen es möglich. Wenn zwei Deklarationen mit der „!important“-Regel auf dasselbe Element angewendet werden, wird die Deklaration mit der größeren Spezifität oder die zuletzt definierte Deklaration angewandt. Vielleicht erinnern Sie sich, dass wir diese Regeln ganz am Anfang in der Einführung besprochen haben. In jedem Fall ist es wichtig zu verstehen, dass sie sowohl für Deklarationen mit der „!important“-Regel gelten als auch für Deklarationen, die diese Regel nicht verwenden.

Anstatt die „!important“-Eigenschaft in CSS mit einer anderen „!important“-Eigenschaft zu überschreiben, ist es besser, die Regel umzuschreiben und gänzlich auf die Verwendung der Eigenschaft zu verzichten. Manchmal ist das allerdings nicht möglich.

Sehen wir uns zum Beispiel Benutzer-Stylesheets an. Mit einem benutzerdefinierten Stylesheet können Lesende die Stile der Website nach Wunsch überschreiben. Lesende könnten zum Beispiel die Schriftgröße erhöhen oder die Farbe der Typografie auf der Seite ändern, um den Inhalt besser lesbar zu machen.

Da ein benutzerdefiniertes Stylesheet unabhängig von der Spezifität ein Autoren-Stylesheet außer Kraft setzt, können Lesende CSS-Regeln ohne das „!important“-Tag hinzufügen. Wenn jedoch das Autoren-Stylesheet die „!important“-Regel verwendet, um die Schriftgröße oder -farbe zu definieren, wird die „!important“-Regel im Benutzer-Stylesheet benötigt.

Lassen Sie uns nochmal auf das Beispiel der Schaltfläche von vorhin zurückkommen. Nehmen wir an, dass auf meiner Website die „!important“-Regeln bereits auf die Klasse „Schaltfläche“ angewandt wurden. Jetzt möchte ich, dass alle <a>-Elemente mit dem ID-Namen „Inhalt“ einen durchgehenden blauen Rahmen haben.

Ich sollte den Code einfach umschreiben und alle „!important“-Tags aus meiner CSS entfernen. Nehmen wir an, dass ich in Zeitnot bin und nach einer schnellen Lösung suche. Dann könnte ich das Tag !important einfach zum CSS-ID-Selektor hinzufügen. Dann würden beide Deklarationen die Eigenschaft !important verwenden, und da ID-Selektoren eine höhere Spezifität als Klassenselektoren haben, würde das <a>-Element im Bereich „Inhalt“ mit einem durchgehenden blauen Rahmen dargestellt werden.

Der HTML-Code bleibt derselbe:

 
<a href="#" class="button">Klicken Sie mich an</a>
<section id="content">
<p> Beispieltext <a href="#" class="button">Klicken Sie mich an</a> </p>
</section>

So sieht das in CSS aus:

 
.schaltfläche {
background: #FF7A59 !important;
color: #FFFFFF !important;
padding: 5px !important;
font-size: 50px !important;
border-radius: 5px !important;
border: 2px solid black !important;
}
#inhalt a {
border: 4px dotted #00A4BD !important;
}

Und so das Ergebnis:

Siehe das Pen-Beispiel Beispiel 1 für die Aufhebung der „!important“-Regel von Christina Perricone (@hubspot) auf CodePen.

Die „!important“-Regeln heben einander im Wesentlichen gegenseitig auf. Da der ID-Selektor eine höhere Spezifität hat als ein Klassenselektor, hat das zweite <a>-Element einen durchgehenden blauen Rahmen, keinen durchgehenden schwarzen.

Sie können die „!important“-Regel auch außer Kraft setzen, indem Sie einen CSS-Selektor mit der gleichen Spezifität verwenden, ihn aber an späterer Stelle im Stylesheet platzieren.

Nehmen wir an, dass ich alle Schaltflächen auf meiner Website mit einem durchgehenden blauen Rahmen versehen möchte. Auch hier sollte ich den Code einfach neu schreiben, kann aber den „!important“-Tag für eine schnelle Lösung verwenden. Wenn ich denselben Klassenselektor .btn mit einer neuen Regel für den durchgehenden blauen Rahmen und ein „!important“-Tag verwende, kann ich es einfach nach der bestehenden Regel im Stylesheet hinzufügen. Da dieses Element an hinterer Stelle im Code steht, hat es eine höhere Spezifität und wird auf Elemente mit der Klasse .btn angewandt.

Der HTML-Code bleibt derselbe:

 
<a href="#" class="button">Klicken Sie mich an</a>
<section id="content">
<p> Beispieltext <a href="#" class="button">Klicken Sie mich an</a> </p>
</section>

So sieht das in CSS aus:

 
.schaltfläche {
background: #FF7A59 !important;
color: #FFFFFF !important;
padding: 5px !important;
font-size: 50px !important;
border-radius: 5px !important;
border: 2px solid black !important;
}
.schaltfläche{
border: 4px solid #00A4BD !important;
}

Und so sieht das Ergebnis aus:

Siehe das Pen-Beispiel Beispiel 2 für die Aufhebung der „!important“-Regel von Christina Perricone (@hubspot) auf CodePen

Nutzung der „!important“-Property in CSS

Obwohl „!important“-Deklarationen nur sparasm im Code zum Einsatz kommen sollten, sollten Sie über diese Eigenschaft und ihre Verwendungsweise Bescheid wissen. Möglicherweise benötigen Sie die „!important“-Regel in Ihren Benutzer-Stylesheets. Es kann auch vorkommen, dass Sie eine Website übernehmen, die Instanzen der Regel enthält. In jedem Fall ist der Umgang mit der „!important“-Eigenschaft ein wichtiger Aspekt beim Erlernen von HTML- und CSS-Kenntnissen.

Titelbild: RossHelen / iStock / Getty Images Plus