Kind-Selektoren
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Ein Kind-Selektor wählt ein Element aus, das ein direkter Nachkomme seines Elternelements sein muss. Ein Kind-Selektor wird durch eine schließende spitze Klammer dargestellt, die oftmals zwischen zwei Typ-Selektoren steht, wie hier gezeigt:
p > strong {
text-decoration: underline;
}In diesem Beispiel wird das Element strong nur dann unterstrichen, wenn es sich direkt innerhalb des p-Elements befindet (siehe die nächste Abbildung):
<div>
In diesem Teil des Satzes passiert gar nichts, weil <strong>strong</strong> kein direkter Nachkomme des div-Elements ist
<p>Dieses <strong>strong-Element</strong> ist dagegen ein Kind-Element des p-Elements und erhält daher die in der CSS-Regel für diesen Fall festgelegten Stildefinitionen.</p>
</div>
Abbildung: Die Auswirkungen der Regel für den Kind-Selektor.
Das Diagramm in der folgenden Abbildung zeigt, auf welche Elemente sich die CSS-Regel auswirkt.
Abbildung: Das durch den Kind-Selektor ausgewählte Element innerhalb der Seitenstruktur.
Der Grund dafür, dass das erste strong-Element in den beiden Abbildungen nicht unterstrichen wird, besteht darin, dass es sich nicht innerhalb des p-Elements befindet. Damit der Stil angewandt wird, muss eine direkte Eltern-Kind-Beziehung zwischen den Elementen vorliegen. Dies ist ein einfacher, aber sehr wesentlicher Unterschied zwischen dem einfachen Nachkommen- und dem Kind-Selektor.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln