CSS: Welche Regel geht vor?

Wenn man an Seiten arbeitet, die von anderen gecodet wurden, kann man manchmal sehr interessante Erfahrungen beim editieren von CSS-Regeln machen. Es gibt Arten ein CSS zu schreiben, die das nachträgliche Editieren der Seiten wahrlich zur Hölle machen. Will man nun aber nicht die komplette Struktur verändern, also die Site komplett neu schreiben, ist man manchmal zu drastischen Mitteln gezwungen.

Die Frage die sich aufdrängt: wenn zwei CSS-Regeln auf ein Element zutreffen, welche Regel zieht?

Beispiel aus dem CSS:

td {color: red;}
.test {color:blue;}
td.test {color:black;}

Beispiel aus dem HTML:

<td class="test" style="color:green">Welche Farbe habe ich nun?</td>

Antwort: Grün. In diesem Falle, denn das dem td zugeordnete style-Attribut überschreibt die anderen Regeln, es ist die speziellste Anweisung. Das mit dem “speziell” ist also sehr wichtig. Wenn wir das style-Attribut weglöschen:


<td class="test">Welche Farbe habe ich nun?</td>

… wird der Text nun schwarz, weil td.test gegenüber .test spezieller, schwerwiegender ist. Was überstimmt nun aber welche Regeln?

  • die speziellere Regel geht vor der unspezielleren Regel
  • im Code angewendete Styles überstimmen Regeln aus dem Stylesheet (sind aber meist unschön!)
  • CSS Klassen gehen vor Zuweisungen an HTML-Elemente
  • CSS Anweisungen die für mehrere Elemente gelten überstimmen solche, die nur für ein Element gelten
  • ID’s überstimmen Klassen

Auch nachzulesen bspw. hier. Der letzte Punkt in dieser Liste hat mir ein wenig zu schaffen gemacht, denn

CSS:

td {color: red;}
#test {color: blue;}
td.testen {color: black;}

HTML:

<div id="test">
<table>
<tr>
<td class="testen">Welche Farbe habe ich denn nun?</td>
</tr>
</table>
</div>

gibt schwarzen Text aus,

CSS:

td {color: red;}
#test td {color: blue;}
td.testen {color: black;}

macht uns den Text wieder blau. Zum Glück, wenn alles nicht hilft, kann man diese Regeln auch noch durchbrechen, mit der !important-Anweisung. Denn bspw.

td {color: red !important;}

macht alles wieder rot.

Veröffentlicht von

Nico

Nico Brünjes ist Digitalkreativer und Internethandwerker. Seit mehr als 15 Jahren erdenkt, baut und programmiert er moderne, standardkonforme und zugängliche Webseiten in HTML, CSS und Javascript.