Advanced CSS - Spezifität - Gleiche Wertigkeit

1. Das vorherige Beispiel

... hat wunderbar die Tücken aufgezeigt, die bei der Verwendung des Universalselektors auftreten. Und selbiges nutzen wir jetzt, um zu sehen, was passiert, wenn wir mit class anstelle von id arbeiten.

Der HTML-Code

<div class="blubb">
  <ul>
    <li><a href="bla.htm" class="schwall">Bla</a></li>
    <li><a href="blubber.htm" class="schwall">Blubber</a></li>
    <li>Laber</li>
  </ul>
</div>

Der CSS-Code

div.blubb *
{
  color: #f0f;
}
a.schwall
{
  color: #f00;
} 

2. Die Spezifität

... sieht nun so aus:

Selektor	A	B	C	D	Wertigkeit
div.blubb *	0	0	1	1	0 - 0 - 1 - 1
a.schwall	0	0	1	1	0 - 0 - 1 - 1

In diesem Fall kommt es dann zu der doch eher seltenen Situation, dass bei den Links innerhalb des div-Elements zwei gleichwertige CSS-Anweisungen existieren. In diesem Fall gewinnt also die letzte Deklaration, also das a.schwall. So bekommen denn nun die Links(!) endlich ihre rote Farbe.

3. Und andersherum

Wenn man jetzt die Reihenfolge ändert, so erscheinen unsere Links wieder in diesem ekeligen Lila, weil auch hier die letzte Deklaration gewinnt.

a.schwall
{
  color: #f00;
} 
div.blubb *
{
  color: #f0f;
}

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt