Dieser übergeordnete blaue Div-Container beinhaltet
den roten Div-Container.
Das dunkelgrüne Blockquote-Element befindet sich im
roten
Container, der sich seinerseits eingebettet im blauen Container
befindet.
Hier werden die beiden gelbgrünen Blockquote-Elemente anders
formatiert, als wie das dunkelgrüne Blockquote Element:
Kind
div > blockquote
Nachfahre von Blau
div div > blockquote
Kind
div > blockquote
Hier der relevante CSS-Code (vollständiges Skript: siehe im Seiten-Quelltext):
.blau { background-color: #77dcff; }
.rot { background-color: #dd4455; }
.gruen { background-color: #55aa55; }
div.blau > blockquote { background-color: #77ff44; }
Anmerkung:
Die hier
gezeigten Selektoren sollen nur die Idee
vermitteln, wie man es mit child-Selektoren machen kann - es
gibt
noch eine weitere
Möglichkeit, wie man hier den Nachfahren von Blau mit Selektoren
ansprechen kann. Zum Beispiel mit div div blockquote, da hier kein
anderer Div-Container an dieser hierarchischen Stelle des Dokuments
steht. Es gibt nicht selten solche Seiten, wo der child-Selektor
spezifischer ist, und ansonsten div div blockquote auch nicht gewollte
Bereiche des übrigen Dokuments ansprechen würde.
Welche Selektoren in Frage kommen können,
entscheidet immer die Baumstruktur des Dokuments (die
Baumstruktur eines Dokuments wird auch DOM genannt).