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.
Gewicht | Selektor |
---|---|
0.0.0.0.0 | * |
0.0.0.0.1 | Element oder Pseudo-Element |
0.0.0.1.0 | class, pseudo-class oder Attribut-Selektor |
0.0.1.0.0 | ID-Selektor |
0.1.0.0.0 | inline style |
1.0.0.0.0 | !important |