CSS Inheritance

Heute will ich euch ein bisschen was darüber erzählen, in welcher Reihenfolge und mit welcher Gewichtung CSS Eigenschaften auf ein Element angewandt werden. Warum ist das wichtig? Bei komplexen Seiten kommt es schnell vor, das mehrere Werte für die selbe Eigenschaft eines Elements festgelegt wurden. Ein kleines Beispiel:

p{
  color:#333;
  font-size:12pt;
  line-height:1.5em;
}
p{
  color:#f00;
}

Wenn man sich nun ein p-Element ansieht, sind diesem für die Schriftfarbe 2 Werte zugewiesen. “#333″ und “#f00″. Welche Farbe wird die Schrift nun haben? In diesem Fall ziemlich eindeutig rot. Das liegt daran, das später definierte Eigenschaften normalerweise den vorherigen Wert überschreiben. Diese Konstellation kam sicherlich bei jedem schon mal vor, auch wenn vielleicht mit anderen Elementen. Aber wie sieht es hierbei aus?

<p id="black" class="red">Text</p>

p#black{
  color:#000;
}
p.red{
  color:#f00;
}

Welche Farbe wird der Text haben? Rot oder Schwarz? Wenn man etwas logisch an die Sache ran geht kommt man schnell darauf das der Text schwarz sein wird und auch warum das so ist. Eine ID sollte immer nur einem Element zugewiesen werden. Also werden Eigenschaften, die über eine ID zugewiesen wurden, wichtiger sein, als Eigenschaften, die über eine Klasse zugewiesen wurden. Das gilt übrigens sobald irgendwo im Selektor eine ID vorkommt. Dazu folgendes Beispiel:

<div id="black">
 <p class="red">BLAU</p>
</div>
<div>
 <p class="red">ROT</p>
</div>

#black p.red{
    color:#00f;
}
p.red {
    color:#f00;
}

Welche Farben haben die Texte nun? Da ich die Schriftfarbe rot später definiert habe als das Blau, könnte man denken das beide Texte in rot dargestellt werden. Das ist aber nicht so. Durch die ID im Selektor wird der erste Wert höher eingestuft als der Wert ohne ID. Dementsprechend wird “BLAU” in blau und “ROT” in rot dargestellt.

Das einzige was noch höher eingestuft ist als eine ID, sind Pseudo Klassen. Auch das erscheint logisch da man z.B. natürlich mit dem “:hover” Wert die jeweilige Schriftfarbe auf jeden Fall überschreiben will. Also hat man bei der Relevanz der einzelnen Selektoren folgende Reihenfolge (von wichtig nach unwichtig):

1. Pseudo Klasse
2. ID
3. Klasse
4. Tagname

Man hat nun aber noch 2 andere Möglichkeiten die Relevanz direkt nach ganz oben zu schrauben. Eine Eigenschaft die direkt beim Tag definiert wurde steht IMMER über den Eigenschaften in der CSS Datei. Will man innerhalb der CSS Datei das eine Eigenschaft auf jeden Fall Beachtung findet, fügt man dem Wert noch ein “!important” hinzu. Dadurch hat es automatisch die höchste Relevanz und kann nur noch von einem Wert der direkt im Tag festgelegt wurde überschrieben werden.

Falls nun aber eine Eigenschaft mehrfach festgelegt wurde und die Relevanz ist die selbe, dann wird immer die Eigenschaft verwendet die zuletzt festgelegt wurde.

Dieses Thema ist leider relativ kompliziert und man hat ziemlich viele Mögliche Konstellationen auf die man erstmal kommen muss… Aber das meiste ist wirklich logisch und man wendet es direkt an ohne es überhaupt in Frage zu stellen oder sich den Kopf darüber zu zerbrechen. Wenn man aber genau weiß wie man nun eine bestimmte Eigenschaft überschreiben kann, ist das so manches mal schon ziemlich praktisch! Falls ihr noch Fragen habt beantworte ich diese gerne in den Kommentaren und erweitere den Artikel ggf. durch den jeweiligen Punkt!