Kaskade

Kaskade

• mehrere CSS Regeln auf das selbe Element anwenden
• Regeln werden nacheinander nach Priorität angewandt
• bei gleicher Eigenschaft überschreiben sich die Regeln dabei
• Hinweis: zeigt eine Regel keine Wirkung -> Priorität prüfen

❮❯HTML<p class="test">Text</p>

❮❯CSS.test {
  background: red;
  background: yellow;
}
p {
  background: green;
}

Priorität (hoch bis niedrig)

Liste durchlaufen und Regeln für das selbe Element vergleichen -> sobald ein Element "gewinnt" aufhören, sonst Liste weiter durchlaufen

• Autorenstyle vor CSS Standardwert/Browserstyle (user agent style)
  ⓘ

  In manchen Browsern kann noch ein Benutzerstyle angegeben werden, der dann zwischen Autoren und Browserstyle gerankt ist.↩
• !important (nur in Ausnahmefällen nutzen)
• Inline Style (style Attribut)
• Anzahl ID-Selektoren
• Anzahl Attribut- + Klassenselektoren
• Anzahl Typselektoren
  ⓘ

  Universalselektor wird nicht mitgezählt↩
• Deklarations-Reihenfolge

Weitere Informationen:

SpeciFISHity - eine Comic-Erklärung

W3Schools CSS Specifity - mit Rechenregeln.

Beim Entwickeln:

Chrome Entwicklungsumgebung -> Elements (Element auswählen) -> Styles (bzw. Rechtsklick -> Untersuchen), um Regeln in Prioritäts-Reihenfolge zu sehen

❮❯HTML<div class="schwarz">
  <p class="rot">Text1</p>
  <p class="rot" id="blau">Text2</p>
  <p>Text3</p>
  <p style="color: yellow">Text4</p>
  <div class="rot">Text5</div>
  <div>Text6</div>
</div>

❮❯CSSdiv.schwarz p.rot {
  color: brown;
}

div[class] p.rot {
  color: pink;
}

.rot {
  color: red;
  /*color: red !important;*/
}

#blau {
  color: blue;
}

p {
  color: green;
  /*color: green !important;*/
}

div div {
  color: grey;
}