Kaskade und Spezifizität
Dauer: bis zu 30 Minuten
Themen:
- Kaskade (Reihenfolge in der Anwendung der Regel)
- Spezifizität (Der spezifischste Selektor „gewinnt“)
Ziel: Grundlegendes Verständnis der Anwendung von CSS-Regeln erhalten
Bei Bedarf gibt es eine kurze Wiederholung des bisher besprochenen Stoffs.
Oft werden mehrere Stylesheets verwendet und es kann auch sein, dass die Selektoren verschiedener Regeln die gleichen Elemente auswählen. In diesen Fällen stellt sich die Frage, welche CSS-Regeln auf die betroffenen HTML-Elemente angewendet werden.
Kaskade
Mit Kaskade (cascading, das „C“ in CSS) ist gemeint, dass die CSS-Regeln nacheinander angewendet werden, so wie sie in den eingebunden Stylesheets auftreten.
Dazu ein vereinfachter Merksatz:
Bei gleichstarken Selektoren hat die Regel Vorrang, die als letztes in der Reihenfolge der Anwendung ist.
Mit „gleichstark“ ist hier die Spezifizität gemeint (mehr dazu unten). Die Reihenfolge der Anwendung wird durch die Anordnung der Regeln in CSS-Dateien oder Einbindung von Stylesheets durch link-Elemente im HTML-Dokument bestimmt.
Einfaches Beispiel mit mehreren Styles für h1-Elemente siehe
ProgContent zu Kaskade
oder Codepen.
Spezifizität
Die Spezifizität (specificity) bestimmt, wie spezifisch ein Selektor ist. Dabei spielt es anders als bei der Kaskade keine Rolle, wo die Regel in der Reihenfolge der Deklarationen steht.
Auch hier wieder ein vereinfachter Merksatz:
Je spezifischer der Selektor, desto größer die Priorität dieser Regel — egal wo diese Regeln in den Stylesheets deklariert wird.
Die Spezifizität ist bei der Vielzahl der verfügbaren Selektoren ein Recht komplexes Thema, von dem wir hier nur die Grundprinzipien besprechen. Wir betrachten hier nur folgendes:
id-Selektoren sind stärker als class-Selektorenclass-Selektoren sind stärker als Elementtyp-Selektoren
Für ein Beispiel mit mehreren Styles siehe
ProgContent zu Spezifizität
oder schrittweise zeigen mit class und id-Selektoren auf Codepen.
Mehr zu den konkreten Berechnungen der Spezifizität beim Mozilla Developer Network (MDN).
CSS in style-Attributen direkt an HTML-Elementen hat immer
Vorrang bzw. höchste Priorität gegenüber eingebundenen Stylesheets.
Zusammenfassung
Kaskade ergibt sich aus der Reihenfolge in der Anwendung einer Regel.
Spezifizität bedeutet, dass der spezifischste Selektor „gewinnt“ und somit eine höhere Priorität gegenüber anderen Selektoren hat, falls diese die gleichen Elemente betreffen.
Es gibt viele weitere Details in Bezug auf die Anwendung von CSS-Regeln. Für den Einstieg in die Arbeit mit CSS genügt ein grundlegendes Verständnis dieser Konzepte — insbesondere, wenn die Webanwendung nicht zu komplex ist. Im Laufe der praktischen Erfahrung mit CSS können bei Bedarf zusätzliche Aspekte vertieft werden.