Kinder auswählen

Manchmal willst du nicht alle Nachfahren, sondern nur die Kinder. Dafür gibt es das Zeichen >:

footer > p {
	color: purple;
}

Der Selektor footer > p wählt die p-Elemente aus, die Kinder eines footer sind, also direkt darin stehen. Den Unterschied siehst du an unserem Footer: footer a wählt beide Links aus, weil sie Nachfahren des Footers sind. footer > a wählt nichts aus, denn die Links stehen nicht direkt im Footer, sondern in den Absätzen.

Das Element main auf unserer Seite enthält vier div-Elemente: das mit der Hauptüberschrift, die beiden Gruppen und die Rassen. Nur das erste ist aber sein Kind; die anderen drei stehen in section. Also wählt main div alle vier aus, main > div aber nur das mit der Hauptüberschrift. Natürlich könnten wir es auch über seine Klasse titel-hintergrund auswählen, aber probieren wir > aus, um den Unterschied zu sehen.