CSS-Anweisungen „durchsetzen“ durch !important

Beim Erstellen von Design können wir uns selber widersprechen. Als einfaches Beispiel weisen wir einer Box die Farbe Grün zu und ein paar Zeilen später dann die Farbe Rot.

Welche Farbe wird die Box haben? Grün, Rot, Grünrot, keine?

Die klare Antwort ist: es kommt darauf an ;)

Machen wir ein Beispiel – erst unser HTML-Code und dann die widersprüchlichen CSS-Anweisungen.

<div id="box1" class="farbe1">Box 1</div>

#box1 {
    background-color: green;
}

#box1 {
    background-color: red;
}

Wer nun das testet, wird feststellen, dass unsere Box über die ID-Selektor angesprochen dann der letzte gewinnt. Das ist auch nachvollziehbar. Erst sagt man das eine (das erste) und überlegt es sich nochmals und bestellt das endgültige (das letzte).

Was passiert aber nun in diesem Fall. Wir nutzen den ID-Selektor und den Klassen-Selektor für die Farbzuweisung:

#box1 {
    background-color: green;
}

.farbe1 {
    background-color: red;
}

Hoppla – jetzt gewinnt die Farbe Grün. Warum das nun? Jeder Selektor hat sein Gewicht und ID-Selektoren haben einen höheren Wert als Klassen-Selektoren. Daher gewinnt die als erstes definierte Farbe Grün über den ID-Selektor.

Das kann man alles berechnen.

CSS-Spezifität, Spezifität Browser bzw. Selektorspezifität

Wer sich da tiefer einlesen möchte, der braucht einfach unter den Stichwörtern „CSS-Spezifität, Spezifität Browser bzw. Selektorspezifität“ suchen. Grob gesagt, haben folgende Selektoren eine aufsteigende Spezifität:

• Universelle Selektoren
• Typselektoren
• Klassenselektoren
• Attributselektoren
• Pseudoklassen
• ID-Selektoren
• Inlinestile

Festlegen, was als Design genutzt wird

Allerdings möchte man manchmal schnell etwas im Design probieren und kann dann die ganze Gewichtungsgeschichte über Bord werfen und festlegen, was berücksichtigt werden muss. Was also absolut wichtig ist – auf englisch in CSS dann „!important“.

Und so sieht es im Code aus (diesmal gewinnt die Klasse vor dem ID-Selektor:

#box1 {
    background-color: green;
}

.farbe1 {
    background-color: red !important;
}

Besser spezifischere Regeln anwenden anstelle von !important

Besser als der Einsatz von !important ist, spezifischere Regeln anzuwenden. Im obigen Beispiel sähe dies so aus:

<div id="box1" class="farbe1">Box 1</div>

div#box1 {
    background-color: green;
}