CSS important und CSS überschreiben

CSS-Selektor ü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 hat h2 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.

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.