CSS - Konflikte und Kaskaden

Innerhalb der CSS-Regeln für ein HTML-Dokument können Konflikte auftreten. Man spricht von einem Konflikt, wenn für eine Eigenschaft eines Elements Dokument mehrere verschiedene CSS-Deklarationen zutreffen. Konflikte können aus vielen Gründen entstehen - absichtlich oder auch nur zufällig:

• Konflikte entstehen durch die Benutzung mehrerer Selektoren. Im folgenden Beispiel wird das h2-Element sowohl durch den Id-Selektor als auch durch den Elementselektor angesprochen:

  See the Pen CSS – Konflikte – Selektoren 1 by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

  
  
• Zudem können auch identische Selektoren an mehreren Stellen in einer CSS-Datei stehen.

  See the Pen CSS – Konflikte – Selektoren 2 by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

  
  
• Auch wenn nur ein Selektor benutzt wird, kann es passieren, dass die gleiche Eigenschaft mit unterschiedlichen Werten belegt wird:

  See the Pen CSS – Konflikte – Mehrfachdefinition by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

  
  
• Zudem können die CSS-Deklarationen an verschiedenen Stellen im HTML-/CSS-Dokument stehen und sich widersprechen:

  See the Pen CSS – Konflikte – Inline by Barbara Dörsam, HdM Stuttgart (@bdhdm) on CodePen.

  
  

Konflikte werden in CSS nach einer exakt vorgegebenen Prozedur, der Kaskade, aufgelöst, die immer ein eindeutiges Ergebnis hat. Der Browser führt sie für jede Eigenschaft eines Elements und für alle Elemente eines Dokuments nacheinander aus. Dabei gelten die folgenden Regeln:

1. Bei Konflikten innerhalb eines Selektors gewinnt immer die letzte Definition.
2. Bei Konflikten, die durch mehrfache Selektoren verursacht werden, gilt die letzte Regel in der CSS-Datei, solange die Selektoren gleichrangig sind.
3. Sind die Selektoren nicht gleichrangig, gewinnt der spezifischere Selektor - unabhängig davon, an welcher Stelle er in der CSS-Datei steht.
4. Werden die CSS-Regeln auf unterschiedliche Art und Weise in das HTML-Dokument eingebunden, so gilt auch hier eine spezielle Reihenfolge der Auswertung (Stylesheet-Kaskade).

Die CSS-Selektoren haben ihre eigene Spezifizität, d.h., eine eigene Wichtigkeit, nach der die Auswertung der CSS-Regeln erfolgt. Je spezifischer der Selektor ist, desto weniger Elemente in HTML wird er ansprechen und desto wichtiger sind die dafür definierten CSS-Regeln.

Folgende Spezifizität gilt für die bisher besprochenen Selektoren. Die Spezifizität und damit die Priorität der Stylevorgaben nimmt in der folgenden Liste von oben nach unten ab:

1. Eine Regel wurde durch ein style-Attribut in einem HTML-Element definiert: <h2 style="color: red">
2. Eine Regel wurde mit einem ID-Selektor definiert: #id01 {color:red;}
3. Eine Regel wurde mit einem Klassen-Selektor definiert .blau {color:blue;}
4. Eine Regel wurde mit einem Element-Selektor (einzeln oder als Gruppe) definiert: h2 {color:red;}
h2 {color:blue; color: green}

CSS-Regeln können auch in unterschiedlichen Dateien definiert werden (inline, eingebettet, extern). Dadurch kann es leicht passieren, dass für ein Element mehrere, widersprüchliche Regeln definiert wurden. Deswegen werden Stylesheets kaskadierend ausgewertet: es gibt eine vordefinierte Reihenfolge, in der die Regeln ausgewertet werden.

Die folgende Hierarchie gilt für die bisher besprochenen Möglichkeiten der Stylesheet-Einbindung. Die Priorität der Stylevorgaben nimmt in der folgenden Liste von oben nach unten ab:

1. Inline-Stylevorgaben
2. Mit <link> importierte externe Stylevorgaben
3. Standardvorgaben des Browsers