erstes Kind-Element

[Manuel]

Hallo,

Mir ist bei dem Pseudo-Elemet first-child etwas aufgefallen, das ich mir nicht erklären kann:
Es geht um den Selektor  div  > *:first-child.

Im Firefox scheint alles in Ordnung zu sein.
Nun dachte ich, der Selektor  div   *:first-child müßte das Gleiche bewirken.
Schließlich ist das erste Kind-Element eindeutig, und da sollte es irrelevant sein, ob man die Eigenschaften hierfür im Kind-Selektor oder im Nachfahren-Selektor deklariert.

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?
Sie ist doch nur in der ersten Box das erste Element.

Bei den anderen Elementen (außer ul) ist alles, wie erwartet.

Gruß
Manuel

[MudGuard]

Hi,

Mir ist bei dem Pseudo-Elemet first-child etwas aufgefallen, das ich mir nicht erklären kann:
Es geht um den Selektor  div  > *:first-child.

Im Firefox scheint alles in Ordnung zu sein.
Nun dachte ich, der Selektor  div   *:first-child müßte das Gleiche bewirken.

Nö, warum sollte er?

Schließlich ist das erste Kind-Element eindeutig, und da sollte es irrelevant sein, ob man die Eigenschaften hierfür im Kind-Selektor oder im Nachfahren-Selektor deklariert.

Nö, natürlich nicht.

:first-child besagt, daß das Element das erste Kind in seinem Elternelement sein muß.

Das hat aber keinerlei Einfluß auf den restlichen Selektor.

Ob man z.B. table td:first-child oder tbody td:first-child oder tr td:first-child oder tr>td:first-child oder nur td:first-child angibt, ist egal.
Es werden diejenigen td ausgewählt, die in ihrem jeweiligen Elternelement (also der jeweiligen tr) das erste Kind sind.

Daß also die erste Zelle jeder Zeile rot wird, ist logisch.
Ebenso ist logisch, daß alle Zellen der ersten Zeile rot sind, die erste tr ist :first-child des tbody.
Gleiches gilt auch für den gesamten tbody - der ist, da weder thead noch tfoot angegeben sind und auch nicht mehrere tbody verwendet wurden, ebenfalls komplett :first-child des table.
Da für die weiter innen liegenden Elemente nichts gegenteiliges gesagt wird, wird color weitervererbt an die inneren Elemente.
==> die gesamte Tabelle ist rot - wie nach Spec zu erwarten ist.

cu,
Andreas

[Sven Rautenberg]

Moin!

Gleiches gilt auch für den gesamten tbody - der ist, da weder thead noch tfoot angegeben sind und auch nicht mehrere tbody verwendet wurden, ebenfalls komplett :first-child des table.

Verdammt... :) Den impliziten <tbody> hatte ich nicht auf der Rechnung. Das erklärt dann natürlich alles.

- Sven Rautenberg

[MudGuard]

Hi,

Gleiches gilt auch für den gesamten tbody - der ist, da weder thead noch tfoot angegeben sind und auch nicht mehrere tbody verwendet wurden, ebenfalls komplett :first-child des table.

Verdammt... :) Den impliziten <tbody> hatte ich nicht auf der Rechnung. Das erklärt dann natürlich alles.

Ich sage nur: DOM-Inspektor. Äußerst hilfreich!

cu,
Andreas

[Manuel]

Danke auch dir für deine Antwort.
Jetzt ist (fast) alles klar.  :-)

Gleiches gilt auch für den gesamten tbody - der ist, da weder thead noch tfoot angegeben sind und auch nicht mehrere tbody verwendet wurden, ebenfalls komplett :first-child des table.

Mal sehen, ob ich es verstanden habe:

Wenn jetzt auch noch thead und tfoot angegeben wären, dann würde doch thead vollständig rot formatiert (weil es das erste Kind von table ist) , und von tbody und tfoot jeweils die erste Zeile (weil sie die jeweils ersten Kinder von tbody und tfoot sind)?

Da für die weiter innen liegenden Elemente nichts gegenteiliges gesagt wird, wird color weitervererbt an die inneren Elemente.

Wenn aber jetzt für die weiter innen liegenden Elemente eine andere Formatierung angegeben wäre, müßten dann nicht trotzdem die Eigenschaften von :first-child greifen, weil dieser Selektor spezifischer ist?

Gruß
Manuel

[MudGuard]

Hi,

Mal sehen, ob ich es verstanden habe:

Wenn jetzt auch noch thead und tfoot angegeben wären, dann würde doch thead vollständig rot formatiert (weil es das erste Kind von table ist) , und von tbody und tfoot jeweils die erste Zeile (weil sie die jeweils ersten Kinder von tbody und tfoot sind)?

Richtig.

Da für die weiter innen liegenden Elemente nichts gegenteiliges gesagt wird, wird color weitervererbt an die inneren Elemente.
Wenn aber jetzt für die weiter innen liegenden Elemente eine andere Formatierung angegeben wäre, müßten dann nicht trotzdem die Eigenschaften von :first-child greifen, weil dieser Selektor spezifischer ist?

Nur, wenn der Selektor für first-child spezifischer ist.
Das ist er ja nicht automatisch.

cu,
Andreas

[Sven Rautenberg]

Moin!

Wenn jetzt auch noch thead und tfoot angegeben wären, dann würde doch thead vollständig rot formatiert (weil es das erste Kind von table ist) , und von tbody und tfoot jeweils die erste Zeile (weil sie die jeweils ersten Kinder von tbody und tfoot sind)?

So ist es.

Da für die weiter innen liegenden Elemente nichts gegenteiliges gesagt wird, wird color weitervererbt an die inneren Elemente.

Wenn aber jetzt für die weiter innen liegenden Elemente eine andere Formatierung angegeben wäre, müßten dann nicht trotzdem die Eigenschaften von :first-child greifen, weil dieser Selektor spezifischer ist?

Nicht zwingend.

Die Spezifität des Selektors .box2 *:first-child ist "0-0-1-1". (Siehe dazu http://www.w3.org/TR/CSS21/cascade.html#specificity)

Du mußt, willst du diese Formatierung durch etwas anderes überschreiben, also mindestens diese Spezifität erreichen (und das dann örtlich hinter diesem Selektor schreiben) oder übertreffen (dann kann das überall im CSS-File stehen).

- Sven Rautenberg

[Manuel]

Vielen Dank nochmal euch beiden.

Ihr habt mir sehr weitergeholfen.  :-)

Gruß
Manuel

[Sven Rautenberg]

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]

Hi,

Warum allerdings in den Vierer-Tabellen alle vier <td> fett und rot formatiert sind, kann ich nicht so ganz nachvollziehen.

Der DOM-Inspektor zeigt es: tbody ;-)

cu,
Andreas

[Manuel]

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.

Ahhh, genau!  :-)
Das habe ich nicht bedacht.

Warum allerdings in den Vierer-Tabellen alle vier <td> fett und rot formatiert sind, kann ich nicht so ganz nachvollziehen.

Ich auch nicht. :-(

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.

Ja, das hat auch genauso funktioniert.

Danke für deine Erklärung

Gruß
Manuel