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

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

  1. 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

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. 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

      1. 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

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    2. 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

      1. 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

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    3. 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

  2. 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

    --
    sumpsi - posui - obstruxi

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

    1. @@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

      --
      „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
      1. 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

        --
        sumpsi - posui - obstruxi
        1. @@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

          --
          „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
          1. 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

            --
            Du kannst das Projekt SELFHTML unterstützen,
            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      2. Hallo Gunnar,

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

        [...] keine komischem Gradienten

        Absicht? 😀

        Live long and pros healthy,
         Martin

        --
        Keyboard error or no keyboard present. Press F1 to continue.
        1. 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

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      3. 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

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  3. 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

    1. 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

      --
      Keyboard error or no keyboard present. Press F1 to continue.
      1. 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ß...