Kaskadierung und Vererbung

Kaskadierung von Formaten

Wenn es für ein Element mehrere Regeln für ein Attribut (z. B. color) gibt, dann gilt folgende Rangfolge

  • kontextabhängig individuell (p#id)
    • vor individuell (#id)
    • vor kontextabhängiger Klasse (p.achtung)
    • vor allgemeiner Klasse (.warnung)
    • vor redefiniertem Standard Format (p)
  • Innerhalb einer Ebene hat !important Vorrang
  • Reihenfolge in der Datei ist das letzte Kriterium
  • inline vor embedded vor externem Stylesheet

Beispiel: Kaskadierung

p#hervorhebung  { color: white; }
p               { color: olive; }
.achtung        { color: green; }
p.achtung       { color: orange; }
p#hervorhebung  { color: red; }
#hervorhebung   { color: grey; }
<p id="hervorhebung" class="achtung">Dies soll hervorgehoben werden.</p>
<p id="auch" class="achtung">Und das hier auch.</p>
<p id="noch" class="achtung" style="color: green;">Und hier.</p>

Vererbung von Formaten

Wenn es für ein Element kein direktes Format gibt, wird das Format des übergeordneten Elements übernommen (Vererbung von Formaten)

  • Vererbung folgt dem Dokumenten-Baum
  • Manche Attribute werden nicht vererbt (z. B. `text-decoration)

Vererbung von Eigenschaften

Bereich Eigenschaft vererbt?
Hintergrund background-attachment, -color, -image, nein -position, -repeat nein
Text color ja
  font-family, -size, -style, -variant, -weight ja
  letter-spacing ja
  line-height ja
  text-align, -indent, -transform ja
  text-decoration nein
  word-spacing ja
Bereich Eigenschaft vererbt?
Rahmen border-collapse, -spacing ja
border-color, -style, -width nein
Listen liste-style-image, -position, -type ja
Positionierung position, bottom, left, top, right nein
  float, clear nein
  z-index nein
Bereich Eigenschaft vererbt?
Weitere Elemente display nein
  height, width nein
  margin (betrifft alle Richtungen) nein
  max-height, -width nein
  min-height, -width nein
  padding (betrifft alle Richtungen) nein
  visibility ja
Pseudoelement content nein
Tabellen caption-side ja

Beispiel: Vererbung

body { font-family: monospace; }
div { font-family: sans-serif; font-size: 90%;}
div ul { color: olive; text-decoration: none; }
<p>Ein Absatz mit etwas Text. Darin eine <em>Hervorhebung</em>.</p>
<div>Hier ein Abschnitt
<h1>Mit Überschrift</h1>
<ul>
  <li>Eins <em>Hervorhebung</em></li>
  <li>Zwei <em>Hervorhebung</em></li>
</ul></div>

Copyright © 2025 Thomas Smits