CSS Spezifitätsregeln funktionieren nicht?
Bin ein wenig am Verzweifeln, da ich das Prinzip der CSS Spezifität nicht so ganz verstehe. Überall wird erklärt, dass die Spezifität abhängig von der Anzahl an Element- / Attribut- und ID-Selektoren ist. Nur wenn diese Anzahl gleich ist spielt die Reihenfolge eine Rolle.
Warum spielt dann hier die Reihenfolge eine Rolle, obwohl der zweite Selektor mehr IDs selektiert als der erste (also die Anzahl der Selektoren nicht gleich ist)?
#id1 { color: yellow; }
#id1, #id2 { color: green; }
<h1 id="id1">Schrift in h1 mit id1</h1> --> ist grün aber nicht gelb
<h1 id="id2">Schrift in h1 mit id2</h1> --> ist grün
Selektoren vertauscht:
#id1, #id2 { color: green; }
#id1 { color: yellow; }
<h1 id="id1">Schrift in h1 mit id1</h1> --> ist gelb
<h1 id="id2">Schrift in h1 mit id2</h1> --> ist grün
3 Antworten
Die Spezifizität berechnet sich anhand der Selektoren, die miteinander kombiniert werden (wobei auch hier nicht nur die Anzahl eine Rolle spielt, sondern auch der Selektortyp). Es gibt Online-Tools, die dir bei der Berechnung helfen können (Beispiel).
In deinem Fall handelt es sich bei der zweiten Regel nur um eine Aufzählung von verschiedenen Selektoren, die sich die gleichen Properties teilen. Die Spezifizität zum ersten Selektor unterscheidet sich nicht, daher zählt die Reihenfolge.
Ja, im ersten Fall hast du einen Selektor, der sich aus zwei ID-Selektoren zusammensetzt und im zweiten Fall hast du zwei unterschiedliche (ID-)Selektoren.
Wenn man einmal sagen würde, das ein einzelner ID-Selektor die Wertung 3 hätte, wäre die Gesamtwertung für den ersten Fall 6 und für den zweiten Fall jeweils 3.
Somit hätte der erste Fall eine deutlich höhere Spezifität als Fall 2, wenn man einem HTML-Element mehrere IDs zuordnen könnte (das ist aber nicht erlaubt).
In deinem Beispiel hängt es von der Kaskade ab, sprich die letzte Regel überschreibt die vorher festgelegten Regeln. Die Spezifität ist die ja die selbe, da es keine verketteten Selektoren sind und es sich immer um einen ID Selektor handelt. Du hast lediglich mehrere Selektoren gruppiert um diesen Elementen die gleichen Eigenschaften zuzuweisen. Es ist weiterhin ein normaler Aufruf und sich halt der letzte durchsetzt, da dieser in der Kaskade an letzter Stelle festgelegt wurde.
Und unabhängig deiner Frage, sollte man in CSS möglichst ohne ID Selektoren arbeiten. Dadurch lassen sich bereits von vornherein gewisse Probleme vermeiden, die sich aufgrund der Spezifität ergeben können. Hinzukommt noch dass sich Klassen sowohl leicht weiterverwenden als auch erweitern lassen. Dadurch lässt sich wiederum einiges an Schreibarbeit einsparen und weniger Code reproduziert wird. Sprich gleichbleibende Eigenschaften in einer eigenen Hilfsklasse definiert werden.
okay, danke für die Antwort und auch den Tipp mit den ID-Selektoren, das wusste ich noch nicht :)
Bei CSS gilt immer der letzte Selektor.
Du überschreibst damit dann die Properties.
okay vielen Dank für die Antwort. Wenn ich das richtig verstehe wäre dann
spezifischer als
oder ist das falsch? Der Online-Rechner sagt im zweiten Fall, dass man 0 ID-Selektoren hat.