Webmaster-Crashkurs

Kaskaden und Spezifität

Wertigkeit von ID-Selektor zum Klassenselektor

Besonders bei der Vererbung kommt die Wertigkeit zum tragen. Es kommt durchaus vor, dass durch Vererbung sich wiedersprechende Eigenschaften einem Element zugewiesen sind.

Als Beispiel ein sehr offensichtlicher Problemfall. Einem Element ist als Hintergrundfarbe rot über eine Klasse zugewiesen und gelb über einen ID-Selektor. Hier ist natürlich nur eines möglich. Was passiert.

Im HTML steht also:

<p id="quintessenz" class="hervorgeboen">
Hier Beispieltext
</p>

In den CSS-Anweisungen sind folgenden Zuweisungen

#quintessenz {
    background-color: yellow;
}

.hervorgehoben {
    background-color: red;
}

Dadurch, dass der ID-Selektor eine höhere Wertigkeit hat, als der Klassen-Selektor, erscheint als Hintergrundfarbe Gelb.

Spezifität in CSS

Stylesheet-Anweisungen können sich wiedersprechen – die eine Angabe sagt „setzte die Farbe in rot“ die andere Angabe sagt „mache die Farbe in blau“. Wer hat Recht, wer gewinnt - wenn mehrere Stylesheet-Anweisungen aufeinander treffen gewinnt die Angabe mit der höchsten Spezifität. Und bitte immer daran denken, dass sehr schnell verschiedene Angaben aufeinandertreffen können, da ja durch die Vererbung und Kaskaden das einfach möglich ist (und oft gewollt ist).

Zum Berechnen der Spezifität geht man am besten mit einer Tabelle vor. Schauen wir uns als erstes ein Beispiel an. Im HTML-Code steht etwas in der Richtung:

<p>Hier kommt Inhalt, der <strong class=“farbe1“>wichtig</strong> ist</p>

Aufgedröselt ergibt sich für den Bereich mit dem Inhalt „wichtig“ also folgende Kombination:

p strong.farbe1, also Element, Element, Klasse

Kaskaden und Spezifität in CSS

Höchste Spezifität setzen mit !important

Wenn die höchste Spezifität für ein Element gesetzt werden soll, kann dieses mit dem Zusatz „!important“ im CSS erreichet werden.

p {
    color: yellow !important;
    background-color: silver;
    font-size: 1.4em !important;
} 
HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2020   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit VideosImpressumDatenschutzerklärung
weitere eigene Projekte: