Argumente in »class« werden nur teilwise umgesetzt

[Zille]

Kann mich bitte mal jemand vom Schlauch schubsen?!

Für eine (zeitweilige) Rabattaktion soll eine h2 eingefügt werden, die etwas anders als die normale h2 formatiert ist. Also gebe ich eine Klasse »rabatt« mit

.rabatt {
	text-align:center;
	color:#3479c6;
}

Die jetzt neue zentrale Ausrichtung funktioniert, die neue Farbe hingegen nicht. Was habe ich übersehen? Danke.

[Stefko]

Ahoi,
da kommen einige Sachen in Betracht. Nutzt Du an anderer Stelle ein !important?
Es kann auch an der Kaskadierung liegen.
Schreibe doch mal

h2.rabatt { ... }

oder wenn Du SCSS nutzt

h2 {
  ...
  ... (was da halt vorher stand)

    &.rabatt {
      text-align:center;
      color:#3479c6;
    }
}

[Zille]

Kein !important, kein SCSS – h2.rabatt funktioniert sowohl für Farbe als auch Ausrichtung. Danke.
Da bleibt allerdings die Frage, weshalb zuvor die Ausrichtung dennoch funktioniert hat.

[Stefko]

Da bleibt allerdings die Frage, weshalb zuvor die Ausrichtung dennoch funktioniert hat.

Das ist was ich oben mit Kaskadierung meinte, also zum einen die Reihenfolge, als auch die Verschachtlung der einzelnen Anweisungen.
Ohne jetzt Dein komplettes CSS zu sehen, ist das nicht genau zu sagen, aber da die Textausrichtung übernommen wurde, war die urspüngliche Farbe der h2 "höherwertiger" als die der rabatt-Klassse.
Evtl. hast Du zB ein body {text-align: left} und Deine eigentlich h2 folgte erst nach der .rabatt. In diesem Fall würde er den txt zentrieren aber die Farbe nicht übernehmen.
Kannst man im Zweifel auch ganz gut mit den Dev-Tools sehen, welche Klasse an welchem Ort die Oberhand hat.

[Zille]

Nö, auch das trifft nicht zu, die eigentliche h2 wird eindeutig vor rabatt definiert. Wie ist die Welt doch böse.
Aber sei es so, ich habe verstanden, worauf du hinaus willst. Und das ich mich wieder einmal mit der Kaskadierung beschäftigen muss.
Danke.