! 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: 

  1. style="..." (Angabe innerhalb des HTML)
  2. #eine_id div.eine_klasse
  3. #eine_id div
  4. #eine_id
  5. div .eine_klasse
  6. div.eine_klasse
  7. 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.

Kombination mit anderen Hacks

Ganz entspannt - und das ist dann die Eleganz des hackens - kann man das !important mit anderen Hacks kombinieren. Ein Kunde kam kürzlich mit der Anforderung auf mich zu, ausschließlich das CSS-Design einer Seite für den IE6 zu fixen.
Alle relevanten Anweisungen für den IE 6 habe ich mit dem !important kombiniert. Dadurch war einerseits sicher gestellt, dass NUR der IE 6 getroffen wurde, ich aber gleichzeitig in wenigen Stunden die Anpassungen erledigt hatte, ohne mich in das komplette Projekt einzuarbeiten und die Umsetzung meines Vorgängers verstehen zu müssen.

// Kombination von IE6-Hack und !important
* html #inhalt {
   width : 960px !important;
}


Deprecated: Directive 'allow_url_include' is deprecated in Unknown on line 0