Selektoren verketten

Du kannst Selektoren auch ohne Leerzeichen oder Komma aneinanderhängen. Dann muss ein Element auf alle gleichzeitig zutreffen:

div.gruppe {
	color: purple;
}

Der Selektor div.gruppe wählt die Elemente aus, die ein div sind und außerdem die Klasse gruppe haben. Ein p-Element mit der Klasse gruppe würde nicht ausgewählt, ein div ohne die Klasse ebenso wenig. Das nennt man Verketten. Neu ist es für dich nicht: a[target="_blank"] und a:hover aus den vorigen Übungen sind ebenfalls verkettete Selektoren.

Verketten ist aus zwei Gründen nützlich. Erstens wählt es Elemente genauer aus, zum Beispiel nur die Gruppen, über denen sich der Mauszeiger befindet: .gruppe:hover. Zweitens gewinnt ein verketteter Selektor gegen jeden seiner Teile. Die Gruppen haben jetzt durch die Regel für .gruppe einen Hintergrund in linen. Gibst du ihnen mit einer Regel für .gruppe:hover einen anderen Hintergrund, gewinnt sie gegen .gruppe, und der Hintergrund ändert sich beim Darüberfahren. Warum genau, erfährst du in der Übung über die Spezifität.

Achte auf den Unterschied: div.gruppe (ohne Leerzeichen) ist nicht dasselbe wie div .gruppe (mit Leerzeichen), das du in der nächsten Übung kennenlernst, oder div, .gruppe (mit Komma), das die Selektoren gruppiert.