The StyleWorksCSS { Referenz · Labor · Übungen }
  1. Startseite
  2. Üben
  3. Übung 3

Übung 3 von 15 · Kaskade

Übung 3: Welche Regel gewinnt? Spezifität im Duell

Der Link soll violett (#7A2FB0) sein. Eine frühere Regel mit ID färbt ihn grau. Die Farbe soll ohne !important und ohne Änderung der ersten Regel gewinnen.

Veröffentlicht Prüfer berechnete WerteHinweise 2
HTML · gegeben
<div id="nav"><a class="aktiv" href="#">Link</a></div>
Basis-CSS · gegeben
#nav a { color: gray; }
Dein CSS · bearbeiten
noch nicht geprüft
Ziel
Dein Ergebnis
  • ·color des Links
  • ·kein !important

Hinweise

Hinweis 1

#nav a hat die Spezifität (0,1,0,1). .aktiv nur (0,0,1,0) – eine Klasse verliert gegen eine ID, egal wo sie steht.

Hinweis 2

Der Selektor muss mindestens ebenso spezifisch sein wie der erste und später stehen – oder spezifischer.

Lösung

Lösung anzeigen

#nav a.aktiv { color: #7A2FB0; }

#nav a.aktiv hat (0,1,1,1) und schlägt #nav a mit (0,1,0,1) in der dritten Position. Alternativ genügt #nav a ein zweites Mal mit der neuen Farbe: gleiche Spezifität, spätere Regel gewinnt. Das Spezifitäts-Duell rechnet beide vor.

Warum die spätere Regel hier nicht genügt

Bei gleicher Spezifität gewinnt die zuletzt notierte Deklaration – das ist die letzte Stufe der Kaskade und die einzige, die von der Reihenfolge im Quelltext abhängt. Sie kommt aber erst zum Zug, wenn alle vorherigen Stufen unentschieden ausgegangen sind, und genau das ist hier nicht der Fall.

Die bestehende Regel spricht das Element über eine Kennung an und wiegt damit in der zweiten Position des Tupels. Eine neue Regel, die nur den Typ nennt, kommt dort nicht heran, gleichgültig wie weit unten sie steht. Die Reihenfolge entscheidet nicht gegen die Spezifität, sondern nach ihr.

Das ist der Grund, warum in gewachsenen Stylesheets so oft der Vermerk für Vorrang auftaucht: Er ist die bequemste Art, eine zu starke Regel zu schlagen, und er verschiebt das Problem nur um eine Stufe nach oben. Die Aufgabe schließt ihn deshalb ausdrücklich aus.

Wie das Tupel gelesen wird

Spezifität ist keine Punktzahl, sondern ein Vergleich von links nach rechts über drei Positionen: Kennungen, dann Klassen samt Attributselektoren und Pseudoklassen, dann Typselektoren und Pseudoelemente. Verglichen wird Position für Position, und die erste Position mit einem Unterschied entscheidet – alles rechts davon ist dann bedeutungslos.

Daraus folgt, dass zwölf Klassen eine einzige Kennung nicht schlagen. Ältere Erklärungen rechnen mit Hundertern, Zehnern und Einern, was zum selben Ergebnis führt, solange keine Position über neun kommt; darüber bricht die Rechnung, der Vergleich nicht. Nicht mitgezählt werden der Universalselektor und die Kombinatoren.

Für diese Aufgabe heißt das: Die neue Regel muss in derselben Position mithalten und in einer weiter rechts gewinnen. Eine Kennung plus eine Klasse plus ein Typ schlägt eine Kennung plus einen Typ an der dritten Stelle. Das Spezifitäts-Duell zeigt beide Tupel nebeneinander.

Der zweite gültige Weg

Es gibt eine zweite Lösung, die der Prüfer ebenfalls annimmt: dieselbe Regel ein zweites Mal notieren, mit der neuen Farbe. Gleiche Spezifität, spätere Position – die neue gewinnt. Sie ist der ehrlichere Weg, weil sie die Spezifität nicht weiter anhebt und damit niemanden zwingt, sie beim nächsten Mal zu überbieten.

Die Aufgabe verbietet nur, die bestehende Regel zu ändern, nicht, sie zu wiederholen. In einem echten Stylesheet wäre allerdings beides ein Symptom: Wer eine Kennung als Gestaltungshaken benutzt, produziert die Situation, in der jede Ausnahme eine noch stärkere Regel braucht.

Die dauerhafte Antwort liegt deshalb eine Ebene tiefer – bei der Frage, ob die erste Regel überhaupt eine Kennung tragen sollte. Der Vergleich id vs class geht dem nach, und die Pseudoklasse, die null zählt, bietet für neue Stylesheets einen Ausweg, den es zu CSS-2.1-Zeiten nicht gab.

Wann der Vermerk für Vorrang berechtigt ist

Die Aufgabe schließt ihn aus, und in gewachsenen Stylesheets ist er fast immer ein Symptom. Es gibt aber drei Stellen, an denen er richtig ist. Die erste ist das Nutzer-Stylesheet: Dort dreht der Vermerk die Rangfolge um und schlägt jede Angabe des Autors – das ist die einzige Stelle, an der CSS ausdrücklich Partei für den Leser ergreift.

Die zweite ist das Überschreiben von Stilen, die ein Skript direkt am Element gesetzt hat. Eine solche Angabe steht außerhalb des Tupels und lässt sich aus dem Stylesheet heraus anders nicht erreichen. Die dritte ist das Attribut im Dokument, das ein Element verbirgt: Weil es über das Vorgabe-Stylesheet wirkt, überschreibt es jede eigene Regel mit einer Anzeigeart – eine Regel mit Vorrang stellt die erwartete Wirkung wieder her.

In allen anderen Fällen verschiebt der Vermerk das Problem nur um eine Stufe: Er lässt sich selbst nur mit einem weiteren Vermerk schlagen, und dann entscheidet wieder die Spezifität – nur eine Ebene höher. Die dauerhafte Antwort ist, die Spezifität überall flach zu halten, damit die Reihenfolge im Quelltext entscheidet. Die Pseudoklasse, die null zählt, und die Kaskadenschichten sind die beiden Werkzeuge, die es dafür seit CSS 2.1 zusätzlich gibt.

Der Prüfer liest die berechnete Farbe des Verweises. Damit bestehen beide oben genannten Wege, und ausgeschlossen ist nur, was die Aufgabe ausschließt: der Vermerk für Vorrang und eine Änderung an der bestehenden Regel. Wer den Weg über die höhere Spezifität wählt, sollte wissen, dass er damit die Latte für die nächste Ausnahme höher legt – das ist keine Frage dieser Übung, aber die Frage, an der echte Stylesheets scheitern.

Fragen zur Übung

Wie prüft die Übung das Ergebnis?

Der Prüfer rendert den eingegebenen Code in einem eigenen Rahmen und liest die berechneten Werte und Maße aus dem Rendering – nicht aus dem Quelltext. Jede Lösung, die dasselbe Rendering ergibt, gilt.

Wird der Fortschritt gespeichert?

Nur in diesem Browser, ohne Anmeldung. Gelöste Übungen bleiben markiert, bis der Browserspeicher gelöscht wird.