Spezifität

Die Reihenfolge ist aber nicht alles. Bevor die Kaskade auf die Reihenfolge schaut, vergleicht sie, wie spezifisch die Selektoren sind, also wie genau sie das Element treffen. Der spezifischere Selektor gewinnt, auch wenn er weiter oben steht. Die Reihenfolge entscheidet nur zwischen gleich spezifischen Selektoren.

Vom spezifischsten zum am wenigsten spezifischen:

1. eine ID, etwa #titel,
2. eine Klasse, ein Attributselektor oder eine Pseudoklasse, etwa .gruppe, [target="_blank"] oder :hover,
3. ein Typ, etwa h1.

Der Universalselektor * zählt überhaupt nicht, jeder andere Selektor gewinnt also gegen ihn.

.gruppe {
	background-color: linen;
}

div {
	background-color: white;
}

Hier bleiben die Gruppen beige, obwohl die Regel für div später kommt: Eine Klasse ist spezifischer als ein Typ.

Besteht ein Selektor aus mehreren Teilen, addieren sie sich: Eine ID gewinnt gegen beliebig viele Klassen, und eine Klasse gewinnt gegen beliebig viele Typen. Deshalb gewinnt .gruppe:hover (eine Klasse und eine Pseudoklasse) gegen .gruppe (nur eine Klasse), und der Hintergrund einer Gruppe ändert sich beim Darüberfahren. Und footer p (zwei Typen) würde gegen p (ein Typ) gewinnen.

Stile im Attribut style gewinnen gegen alle Selektoren. Das ist ein weiterer Grund, sie zu vermeiden: Sie lassen sich schwer überschreiben.