CSS important: CSS zwingend überschreiben

CSS-Selektor überschreiben

Die CSS-Kaskade ist ein Satz von Regeln, die den Rang eines Selektors bestimmen. Die »Nähe« zum Element, Precedence (Vorrang) und Spezifität legen fest, welche Selektoren im Konfliktfall andere Selektoren überschreiben.

Kombinierte Selektoren wie .entry-content section h2 { … } erschweren das Überschreiben, denn es reicht nicht, dem h2 eine andere Farbe zuzuweisen: Durch die Kombination mit .entry-content und section h2 hat ein höheres Gewicht als das einfache h2.

Wer das Design für ein WordPress-Theme ändert, kennt das Problem. Wurde das CSS zuvor in der CSS-Datei des Themes festgelegt, treten die ersten Komplikationen auf. Wenn das cite-Element nicht mehr kursiv, sondern im normalen Schriftstil gesetzt werden soll, hilft ein einfaches Überschreiben durch eine eigene Regel nicht.

<blockquote>
	<p>Use the manual, Luke! Use the manual</p>
	<cite>Obi Web Kenobi</cite>
</blockquote>

cite {
	font-style: normal;
}

Use the manual, Luke! Use the manual

Obi Web Kenobi

Die Regel zeigt keine Wirkung. Das liegt in diesem Beispiel daran, dass hier ein Stil mit einem höheren Gewicht – einer höheren Spezifität – wirkt. Am besten zeigt die Entwickler-Werkzeuge der Browser-Konsole, wie und wo das cite-Element zuvor festgelegt wurde.

Erst wenn der eigene CSS-Stil nicht nur näher am Element liegt, sondern auch mindestens dasselbe Gewicht erzielt, gehorcht das cite-Element dem eigenen CSS: cite muss als blockquote cite überschrieben werden.

CSS !important – der Vorschlaghammer

Die Suche nach der CSS-Regel, die überschrieben werden soll, kann kompliziert werden. Gerade bei Stylesheets für Content Management Systeme, in denen Bootstrap-CSS und Theme-CSS vor der eigenen CSS-Datei liegen, brauchen wir einen CSS-Spürhund.

Was liegt dann näher, als direkt ein !important einzusetzen, um das eigene CSS durchzusetzen?

cite {
	font-style: normal !important;
}

Das mag schnell und einfach funktionieren, empfehlenswert ist es nicht. !important hebt das Gewicht der Regel – die Spezifität – auf die höchste Stufe. Wenn wir ein paar Monate später einem cite-Element irgendwo ein besonderes Aussehen zu verleihen, würde nicht mal eine eigene Klasse für das cite-Element wirken. !important schlägt einfach alles und setzt sich über alles hinweg.

!important überschreiben

Den Teufel mit Belzebub austreiben: !important kann nur durch ein weiteres !important überschrieben werden. Spätestens hier wird es gruselig. Wenn es nicht ohne !important geht, dann sollten diese Regeln genauso wie Regeln mit einer hohen Spezifität weit unten im Stylesheet stehen.

Dann ist der Einsatz von CSS revert oder unset eine Überlegung wert, das Element auf seine vorgegebenen Stile zurück zu setzen oder sämtliche Stile zu entfernen.

CSS Spezifität – Gewicht von CSS-Regeln

Ein paar Faustregeln sind schnell gelernt. Die wichtigste Regel ist die Position der Regel in den Stylesheets. Je näher am Element, desto stärker zieht die Regel. Genauer spezifizierte CSS-Regeln erheben sich über weniger spezifizierte Regeln.

• Element und Pseudo-Element-Selektoren haben ein geringes Gewicht.
• class- und Pseudo-class-Selektoren erheben sich über Element- und Pseudo-Element-Selektoren.
• Ein id-Selektor wiegt schwerer als ein class- oder pseudo-class-Selektor.
• inline-Stile setzen sich gegenüber den Stilen aus einem style-Element oder der CSS-Datei durch.
• Das höchste Gewicht hat ein Stil, für den !important deklariert ist.