nicht angemeldet
Moin!
Hab' hier mal eine Testdatei mit dem Nachfahren-Selektor erstellt.
http://halmi.ha.funpic.de/self/first-child.html
Was ich jetzt nicht verstehe:
warum wird in jeder Box die Tabelle rot formatiert?
Weil sie aus mehreren Elementen besteht, die innerhalb des <table> liegen.
Wenn du *:first-child definierst, gelten diese Angaben ja für alle ersten Elemente jeder Art.
Wenn du .box2 *:first-child definierst, gilt das für alle Elemente innerhalb von .box2, aber egal, wie tief verschachtelt sich das Element befindet.
Also gilt das sowohl für das erste Element innerhalb von .box2, als auch für das erste Element innerhalb eines Elements in .box2, beispielsweise also für das erste <li> innerhalb von <ul> innerhalb von .box2.
<div class="box2">
<ul>
<li>list-item-1</li>
<li>list-item-2</li>
<li>list-item-3</li>
</ul>
<h2>eine h2 Überschrift </h2>
</div>
Warum allerdings in den Vierer-Tabellen alle vier <td> fett und rot formatiert sind, kann ich nicht so ganz nachvollziehen. Eigentlich müßte die Zelle rechts unten normal formatiert bleiben, wenn die Tabelle an sich nicht das erste Element ist.
<div class="box2">
<div>jetzt kommt ganz viel text text text text text
in einen weiteren div</div>
<TABLE cellspacing="7" cellpadding="7" border="2">
<TR>
<TD>cell-1</TD>
<TD>cell-2</TD>
</TR>
<TR>
<TD>cell-1</TD>
<TD>cell-2</TD>
</TR>
</TABLE>
<h2>eine h2 Überschrift </h2>
Aber innerhalb der Tabelle gibt es ein first-child in Form von <tr> (die erste Zeile wird also immer fett rot), und es gibt in jeder Zeile ein first-child von <td> (die erste Spalte wird also auch immer fett rot).
Wenn du hingegen den Selektor ">" benutzt, dann wird dadurch bestimmt, dass das gewünschte Element wirklich direktes Kindelement sein muß, was dann sämtlichen "Kindelement auf einer tieferen Ebene"-Effekte ausschließt.
- Sven Rautenberg
MudGuard