Selektor für Nachfahren
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Führen wir uns noch einmal Folgendes vor Augen: In der Vererbungshierarchie eines HTML-Dokuments sind bis auf die Ausnahme von html alle HTML-Elemente Nachfahren von mindestens einem anderen HTML-Element. Mit einem Selektor für Nachfahren (engl. descendant selector) können Sie Stilregeln zuweisen, die sich ausschließlich auf untergeordnete Elemente in der Vererbungskette eines bestimmten Elements beziehen.
Ein Selektor für Nachfahren, wie im folgenden Beispiel gezeigt, beschränkt die angewandte Stilregel auf die Nachfahren anderer Elemente. Der Gültigkeitsbereich eines »descendant selectors« wird bestimmt durch die HTML-Elemente, die in der Regel, durch Leerzeichen getrennt und von links nach rechts gelesen, aufgelistet sind.
li em {
color: green;
}Diese Stilregel definiert eine grüne Schrift für alle Wörter innerhalb von <em></em>-Tags. Sie wirkt sich jedoch nur aus, wenn em der Nachfahre eines Listenpunkts ist.
Im folgenden Beispiel wird der Text innerhalb der ersten <em></em>-Tags in grünen Zeichen dargestellt, der Text zwischen den zweiten <em></em>-Tags jedoch nicht, da das em-Element hier kein Nachfahre eines li-Elements ist.
<ul>
<li>Erster Eintrag</li>
<li><em>Zweiter</em>Eintrag</li>
</ul>
<p>Ein Wort in <em>Kursivschrift</em>.</p>Bei Selektoren für Nachfahren muss die Vererbung nicht zwischen direkt über- und untergeordneten Elementen erfolgen, sondern kann auch über mehrere Ebenen hinweg geschehen.
<div class="seitenleiste">
<p>Falls Sie Fragen haben, <a href="contact.html">rufen Sie unser Büro während der Geschäftszeiten an</a>.</p>
</div>Die folgende Stilregel betrifft daher auch das a-Element, das zwar direkt dem p-Element untergeordnet, aber in zweiter Generation ein Nachfahre des div-Elements ist:
div a {
font-style: italic;
}| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" 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.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg