CSS: Welche Regel geht vor?

Thema:

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.

Noch keine Kommentare.

Datenschutzhinweis

Daten die in dieses Formular eingegeben werden, werden mit Hilfe des Dienstes welcomments.io verarbeitet. Dabei fallen die in der Datenschutzerklärung dieses Dienstes aufgeführten Daten (IP-Adresse, Browserversion) an, die dort auch gespeichert werden. Gebe keine persönlichen Daten in dieses Formular ein, im Zweifelsfall nutze einen Spitznamen, alles eingegebene wird hier öffentlich angezeigt. Es werden keine Cookies gespeichert, lediglich der Kommentartext wird im Localstorage des Browsers zwischengespeichert.

GitHub-flavored Markdown und einfache HTML-Tags werden unterstützt.

Hinweis…

Diese Seite enthält Videos von Youtube. Diese sind standardmäßig deaktiviert. Falls Du unten auf „Ja“ klickst, werden Daten von Youtube auf Deinen Rechner geladen und so mindestens Deine IP-Adresse an Youtube weiter gegeben. Cookies werden nicht verwendet. Mehr Infos.

Möchtest du Youtube auf dieser Seite aktivieren?