Inhalt
! important
Wertigkeiten verändern mit der !important-Regel
Das Schlüsselwort ! important verändert die natürliche Wertigkeit der Style-Angabe.
Dabei spielt es keine Rolle, ob zwischen important und dem Ausrufezeichen ein Leerzeichen ist. Die Regel wird von allen Browsern unterstützt.
Die Wirkweise der !important-Regel ist das "überbieten" der CSS-Prioritäten. Mit ! important setzen Sie die höchste Priorität.
CSS Code-Beispiel
#content ul li {
color : red;
}
ul li {
color : blue !important;
}
In diesem Beispiel hat die Anweisung #content ul li die höchste Priorität. Listenpunkte würden damit rot dargestellt. Ohne das !important in der zweiten Anweisung hätte die blaue Farbangabe keinen Effekt auf die Listeneinträge, die innerhalb der ID #content sind.
Durch das !important geben Sie der zweite Anweisung allerdings ein hohe Wertigkeit, Listenpunkte werden damit blau dargestellt.
Wertigkeiten von CSS-Style-Definitionen
Eine grobe Einteilung der Wertigkeiten des CSS sieht so aus:
- style="..." (Angabe innerhalb des HTML)
- #eine_id div.eine_klasse
- #eine_id div
- #eine_id
- div .eine_klasse
- div.eine_klasse
- div
Die konkrete Wertigkeiten sind unter dem unten stehenden Link zu SELFHTML aufgelistet.
Bewertung
Die !important-Regel ist Teil des CSS-Standards und damit völlig legitim, einzusetzen. Allerdings muss man sich dem Einsatz klar vor Augen halten - es ist CSS-Design mit dem Holzhammer. Eine CSS-Angabe einmal mit einem ! important versehen, werden Sie von einer anderen Stelle aus, mit einer gut geschriebenen Cascade nicht mehr ansprechen können.
Bei großen Projekten oder für die schnelle Lösung kommen Sie manchmal nicht ohne ein ! important aus. Eleganter ist es aber immer, eine neue Klasse einzuführen, oder eine saubere Cascade zu schreiben.
Weiterführende Links
SELFHTML: Gewichtung der Selektoren
Information auf Englisch - W3C: !important-Regel / !important rules
Quatsch? Unsinn! Wie jetzt gleich?
Wir versuchen, alles zu testen und nur richtige Dinge zu schreiben, vielleicht haben wir aber hier und dort was übersehen, die Beschreibung ist in der Ausdruckweise nicht vollständig, oder es gibt Anregungen, was hier stehen sollte oder welcher Link noch fehlt.
Wir freuen uns über jede Anregung! Kurze Mail an mail@css-hack.de.
