Wertigkeiten verändern mit der !important-Regel

Dez 27
2009

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

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.

Leave a Reply

You must be logged in to post a comment.

Optimization WordPress Plugins & Solutions by W3 EDGE