CSS-Regeln und ihr Gewicht

Freunde, Bekannte, Kollegen rufen mich gerne mal zu sich an den Arbeitsplatz, präsentieren einen Schnipsel aus einem CSS und schauen mich dann mit einem großen Fragezeichen im Gesicht an und die Frage lautet: »Warum wird das nicht so dargestellt, wie ich das will?« Mal davon ausgegangen, das HTML– und CSS-Code formal richtig sind, kann es ja schon einmal passieren, dass die eine CSS-Regel die andere überschreibt. Nach welchem Muster dies geschieht, das ist leider Gottes für so manchen der an CSS herumschraubt ein böhmisches Dorf, obwohl ich mir fast sicher bin, dass selbst in »CSS für Dummies« etwas darüber gesagt wurde.

OK, wir wollen ja nicht dumm sterben, deswegen hier nochmal die goldenen Regeln der Spezifität von CSS-Selektoren. Und das geht so: je nach ihrer Spezialität sind CSS-Selektoren von unterschiedlichem Wert oder Gewicht. Ein Beispiel:

[syntax,specificity1.html,html]

Ein passendes CSS dazu könnte so aussehen:

[syntax,specificity1.css,css]

Preisfrage: ist »Hier steht Text« nun grün oder rot? Antwort: rot. Denn #number1 .red p wiegt schwerer als #number1 p. Anders sieht es aus, würde folgendes CSS benutzt:

[syntax,specificity2.css,css]

Nun wird der Text grün gerendert. Das ist kein Hexenwerk, sondern beruht auf einer einigermassen einfachen Berechnung. Je nachdem wie oft ein CSS-Selektor mit IDs, mit Klassen oder mit HTML-Tags ausgezeichnet ist, werden ihm unterschiedliche Werte zugeschrieben. IDs zählen dabei 100, Klassen 10 und HTML-Tags 1, jeweils multipliziert mit der Anzahl des Auftretens. Die obigen Beispiele mal ausgerechnet:

Beispiel1: #number1 p = 1 x 100 + 1 x 1 = 101
#number1 .red p = 1 x 100 + 1 x 10 + 1 x 1 = 111

Beispiel2: #number1 p = 1 x 100 + 1 x 1 = 101
.red p = 1 x 10 + 1 x 1 = 11

Unnötig komplizierter Code wie body #id #subid p span.card hat dann schon ein Gewicht von: 1 + 100 + 100 + 1 + 1+ 10 = 213.

Wer das nicht im Kopf ausrechnen kann oder will, es gibt dann noch eine nette Eselsbrücke. Man zähle zuerst die IDs, dann die Klassen und dann die Tags und schreibe die jeweiligen Werte einfach in dieser Reihenfolge nebeneinander:
body #id #subid p span.card {color: red} /* IDs=2 Klassen=1 Tags=3 = 213 */
[Gefunden in der guten alten WDG HTML Help.]

Damit kann man dann schon ein wenig Spass haben und mit ein wenig Hirnschmalz sein CSS doch einigermassen planen und auch ein Stückweit sprechend gestalten. In meinen aktuelle CSS heisst ein sehr hohes Gewicht immer: diese Regel ist wichtig, sie steht fest, wahrscheinlich im Styleguide, bitte nicht überschreiben. Was für Kollegen die später mit dem Code hantieren schonmal ein Hinweis ist… da könnten sie nun natürlich immer noch mit einem beherzten !important drüber bügeln, aber das müssen sie sich auch erstmal trauen. 😉

Veröffentlicht von

Nico

Nico Brünjes ist Digitalkreativer und Internethandwerker. Seit mehr als 15 Jahren erdenkt, baut und programmiert er moderne, standardkonforme und zugängliche Webseiten in HTML, CSS und Javascript.