überschreibt der Wert aus der zweiten CSS Datei automatisch den Wert aus der ersten CSS Datei ?

[Uli]

Hallo

Wenn in der Datei

css_1 steht .beispiel {color:#000000}

und in

css_2 steht .beispiel {color:#ff0000}

wird dann der Wert überschrieben?

Meine Frage wäre nämlich, werden die CSS Dateien nacheinander abgearbeitet, oder kann das von Browser zu Browser verschieden sein? Und wie kann ich es machen, wenn ich eine Haupt CSS Datei habe, in dieser aber nichts ändern möchte, sondern die Werte aus der zweiten diese dann gegebenen Falls überschreiben soll.

Uli

[Matthias Apsel]

Hallo Uli,

Die zweite CSS-Datei überschreibt gleichlautende Deklarationen der ersten. Wenn du in der ersten nichts ändern möchtest, kannst du keinen Einfluss darauf nehmen, was mit Deklarationen in der zweiten Datei passieren soll.

Bis demnächst
Matthias

[Uli]

Die zweite CSS-Datei überschreibt gleichlautende Deklarationen der ersten.

Also wird mein WERT

css_1 steht .beispiel {color:#000000}

und in

css_2 steht .beispiel {color:#ff0000}

überschrieben?

Wenn du in der ersten nichts ändern möchtest, kannst du keinen Einfluss darauf >nehmen, was mit Deklarationen in der zweiten Datei passieren soll.

Weil du schreibst das ich keinen Einfluss darauf nehmen kann, aber wenn es überschrieben wird, habe ich doch Einfluss darauf?

Uli

[Matthias Apsel]

Hallo Uli,

Also wird mein WERT

css_1 steht .beispiel {color:#000000}

und in

css_2 steht .beispiel {color:#ff0000}

überschrieben?

Ja.

Weil du schreibst das ich keinen Einfluss darauf nehmen kann, aber wenn es überschrieben wird, habe ich doch Einfluss darauf?

Du kannst in der zweiten Datei Deklarationen der ersten überschreiben.

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

Die zweite CSS-Datei überschreibt gleichlautende Deklarationen der ersten. Wenn du in der ersten nichts ändern möchtest, kannst du keinen Einfluss darauf nehmen, was mit Deklarationen in der zweiten Datei passieren soll.

Ich kann grad nicht folgen. Welches Szenario schwebt dir vor? Mit der zweiten kann man doch eben Einfluss auf die erste nehmen, ohne sie zu ändern.

Gruß
Kalk

[Matthias Apsel]

Hallo Tabellenkalk,

Die zweite CSS-Datei überschreibt gleichlautende Deklarationen der ersten. Wenn du in der ersten nichts ändern möchtest, kannst du keinen Einfluss darauf nehmen, was mit Deklarationen in der zweiten Datei passieren soll.

Ich kann grad nicht folgen. Welches Szenario schwebt dir vor? Mit der zweiten kann man doch eben Einfluss auf die erste nehmen, ohne sie zu ändern.

Ja.

Wahrscheinlich ist das Deutsch kaputt:

Und wie kann ich es machen, wenn ich eine Haupt CSS Datei habe, in dieser aber nichts ändern möchte, sondern die Werte aus der zweiten diese dann gegebenen Falls überschreiben soll.

Bis demnächst
Matthias

[Robert B.]

Moin Matthias,

Die zweite CSS-Datei überschreibt gleichlautende Deklarationen der ersten. Wenn du in der ersten nichts ändern möchtest, kannst du keinen Einfluss darauf nehmen, was mit Deklarationen in der zweiten Datei passieren soll.

Es gibt aber auch noch !important.

Viele Grüße
Robert

[Rolf B]

Hallo Uli,

Ja, CSS Dateien werden in der Reihenfolge abgearbeitet, wie der Browser sie antrifft.

Nein, das ist nicht vom Browser abhängig. Es gibt nämlich sehr exakte Vorschriften, wie CSS Regeln zu kombinieren sind.

Und Vorsicht, deine Seite verwendet mehr CSS als Du selbst mitlieferst.

Wenn Regel B später als Regel A angetroffen wird, und in beiden die gleichen Eigenschaften gesetzt werden, haben dann die Werte aus Regel B Vorrang?

Scheinbar einfache Antwort^[1]: wenn Regel A und Regel B die gleichen Selektoren nutzen, dann gewinnt Regel B.

Aber so einfach ist es nicht. Das C in CSS steht für Cascade, und grundlegene Informationen darüber, wer in diesem Wasserfall das letzte Blubb hat, findest Du im SelfWiki: CSS Kaskade

Rolf

---

1. Auch Lüge für Kinder genannt ↩︎

[Gunnar Bittersmann]

@@Rolf B

wenn Regel A und Regel B die gleichen Selektoren nutzen, dann gewinnt Regel B.

Dazu müssen die Selektoren nicht gleich sein; das ist auch so, wenn sie die gleiche Spezifität haben.

Und das mit der Reihenfolge trifft auch nicht nur auch verschiedene Regeln zu, sondern auch auf Deklarationen innerhalb einer Regel.

Was man für progressive enhancement nutzt:

html {
	background: purple;
	background: conic-gradient(blue, red, blue);
	min-height: 100vh;
}

Die zweite Deklaration überschreibt die erste. Außer in Browsern, die noch keine komischem Gradienten kennen; die ignorieren die zweite Deklaration und der Fallback aus der ersten gilt.

😷 LLAP

[Rolf B]

Hallo Gunnar,

wenn Regel A und Regel B die gleichen Selektoren nutzen, dann gewinnt Regel B.

Dazu müssen die Selektoren nicht gleich sein; das ist auch so, wenn sie die gleiche Spezifität haben.

Stimmt schon. Das macht meine Aussage aber nicht falsch (⇒ Implikation)…

Weswegen ich das auch als Lüge für Kinder bezeichnete: starke Vereinfachung für den ersten Verständnisschritt, im Rahmen der Frage des OP. Studium von Herkunftspriorität und Specifishity erfolgt dann über die weiter führende Literatur.

Rolf

[Gunnar Bittersmann]

@@Rolf B

wenn Regel A und Regel B die gleichen Selektoren nutzen, dann gewinnt Regel B.

Dazu müssen die Selektoren nicht gleich sein; das ist auch so, wenn sie die gleiche Spezifität haben.

Weswegen ich das auch als Lüge für Kinder bezeichnete: starke Vereinfachung für den ersten Verständnisschritt, im Rahmen der Frage des OP.

Meine Ergänzung gehört für mich zum ersten Verständnisschritt dazu:

<section id="section-1">
  <h2 id="heading-1">Da steh’ ich drüber!</h2>
  <p>…</p>
</section>

section #heading-1 { background: red }

#section-1 h2 { background: blue }

Ist die Überschrift rot oder blau?

😷 LLAP

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ist die Überschrift rot oder blau?

Das war aber nicht die Frage des OP. Er schrieb ausdrücklich von identischen Selektoren.

Bis demnächst
Matthias

[Der Martin]

Hallo Gunnar,

html {
	background: purple;
	background: conic-gradient(blue, red, blue);
	min-height: 100vh;
}

[...] keine komischem Gradienten

Absicht? 😀

Live long and pros healthy,
 Martin

[Matthias Scharwies]

Servus!

Hallo Gunnar,

html {
	background: purple;
	background: conic-gradient(blue, red, blue);
	min-height: 100vh;
}

[...] keine komischem Gradienten

Absicht? 😀

im SELF-Blog: Das kommt mir aber konisch vor: Verläufe mit CSS

Live long and pros healthy,
 Martin

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Die zweite Deklaration überschreibt die erste. Außer in Browsern, die noch keine komischem Gradienten kennen; die ignorieren die zweite Deklaration und der Fallback aus der ersten gilt.

Der @Matthias Scharwies hat mich auf diesen Polyfill aufmerksam gemacht. Aber den kennst du bestimmt schon.

Bis demnächst
Matthias

[Linuchs]

werden die CSS Dateien nacheinander abgearbeitet

Radio Eriwan: Im Prinzip ja.

Die Zeilen sämtlicher CSS-Dateien werden hintereinander ausgewertet. Also eine Datei kann sich mit einer folgenden Angabe selbst widersprechen oder durch eine Angabe in einer nachfolgenden Datei widersprochen werden.

background: #ffc;

wird überschrieben durch ein späteres

background: #fcc;

Wenn du das nicht möchtest, bezeichne die vorangehende Zeile als wichtig:

background: #ffc ! important;

Unabhängig von der Reihenfolge haben speziellere Angaben immer Vorrang vor allgemeinen Angaben:

table background:#ffc;

gilt für Tabellen auch dann, wenn später

background: #fcc;

definiert wird.

Linuchs

[Der Martin]

Hallo,

Wenn du das nicht möchtest, bezeichne die vorangehende Zeile als wichtig:

background: #ffc ! important;

das sollte aber nur der allerletzte Ausweg sein. Meist kann man das durch eine saubere Strukturierung und ausreichend spezifische Selektoren vermeiden.

Live long and pros healthy,
 Martin

[klawischnigg]

Hi there,

Wenn du das nicht möchtest, bezeichne die vorangehende Zeile als wichtig:

background: #ffc ! important;

das sollte aber nur der allerletzte Ausweg sein. Meist kann man das durch eine saubere Strukturierung und ausreichend spezifische Selektoren vermeiden.

Ja, !important hat dort seine "Berechtigung" bzw. kann dort hilfreich sein, wo man fremde resp. vorgegebene Stylesheetanweisungen bearbeiten muß. Wenn das Stylesheet eine Eigenentwicklung ist, dann hat man in der Tat etwas falsch gemacht, wenn man !important verwenden muß...