Frage zu first-child

[Matze]

Hallo!

Ich wollte das erste Kind eines Elements mit einer bestimmten Klasse ansprechen.
Leider werden die Angaben zu :first-child aber ignoriert.
Könnte mir bitte jemand sagen wo mein Fehler liegt?

Hier der Code:

.foo:first-child {  
    border:1px solid red;  
}

<ul>  
    <li>test</li>  
    <li class="foo"><h3>test</h3></li>  
</ul>

Danke und Grüße, Matze

[suit]

Könnte mir bitte jemand sagen wo mein Fehler liegt?

Sicher doch.

Vor allem: Was erwartest du von deinem Code in welchem Browser?

[Gunnar Bittersmann]

@@suit:

nuqneH

Sicher doch.

?? Ich finde Matze’s Informationen durchaus ausreichend.

Vor allem: Was erwartest du von deinem Code in welchem Browser?

Dass das Element '<li class="foo"><h3>test</h3></li>' rot umrahmt wird.

Qapla'

[suit]

Vor allem: Was erwartest du von deinem Code in welchem Browser?

Dass das Element '<li class="foo"><h3>test</h3></li>' rot umrahmt wird.

Für mich ist nicht ersichtlich ob das h3-Element als 1. Kind des LI-Elements gemeint ist (da ist schlichtweg der Selektor flasch) oder das erste li-Element das erste Element innerhalb welches die Klasse Foo trägt - wofür :nth-of-type() oder :nth-child() besser geeignet wäre und :first-child hier ohnehin nicht zutrifft.

[Matze]

Vor allem: Was erwartest du von deinem Code in welchem Browser?

Ich möchte das h3-Element ansprechen. Habs aber geschafft.
Ich hatte falsch verstanden, dass .foo:firstchild nicht das erste Kind von .foo sondern das erste .foo anspricht.

Grüße, Matze

[suit]

Ich möchte das h3-Element ansprechen. Habs aber geschafft.

Dann ist ja gut - also hatte Gunnar unrecht :p WIN

[Gunnar Bittersmann]

@@suit:

nuqneH

also hatte Gunnar unrecht :p WIN

Du bescheißt.

Qapla'

[suit]

also hatte Gunnar unrecht :p WIN

Du bescheißt.

Natürlich - und ich kann damit sämtliche alternativen Realitäten sehen :p

[Bademeister]

Hi Matze.

Ich hatte falsch verstanden, dass .foo:firstchild nicht das erste Kind von .foo sondern das erste .foo anspricht.

Das tut es (i.a.) auch nicht. Es spricht alle Elemente der Klasse "foo" an, die das erste Kind ihres Elternelementes sind.

Viele Gruesse,
der Bademeister

[Der Martin]

Hi,

Ich wollte das erste Kind eines Elements mit einer bestimmten Klasse ansprechen.

dann hast du vermutlich eine andere Vorstellung als dein Browser, welches das erste Kind ist. Oder du verwendest einen Browser, der :first-child nicht kennt, etwa den IE6.

.foo:first-child {

border:1px solid red;
}

>   
> ~~~html

<ul>  

>     <li>test</li>  
>     <li class="foo"><h3>test</h3></li>  
> </ul>

Hast du das exakt so im Quellcde stehen? Also kein Zeilenumbruch oder Whitespace zwischen <li class="foo"> und <h3>? - Denn dann wäre der Textknoten, der den Whitespace enthält, das erste Kind.

Ciao,
 Martin

[suit]

Hast du das exakt so im Quellcde stehen? Also kein Zeilenumbruch oder Whitespace zwischen <li class="foo"> und <h3>? - Denn dann wäre der Textknoten, der den Whitespace enthält, das erste Kind.

Das würde auf :-moz-first-node zutreffen, :first-child selektiert den ersten Elementknoten.

[apsel]

Om nah hoo pez nyeetz, Der Martin!

Hast du das exakt so im Quellcde stehen? Also kein Zeilenumbruch oder Whitespace zwischen <li class="foo"> und <h3>? - Denn dann wäre der Textknoten, der den Whitespace enthält, das erste Kind.

Ich habs grade mal mit und ohne whitespace getestet, dass Ergebnis ist dasselbe. (FF3.6)

Solche Spitzfindigkeiten mit Textknoten habe ich bisher immer js zugeordnet?

Matthias

[suit]

Ich habs grade mal mit und ohne whitespace getestet, dass Ergebnis ist dasselbe. (FF3.6)

natürlich - der OP enthält uns aber vor, was er erwartet.

[Gunnar Bittersmann]

@@Matze:

nuqneH

Könnte mir bitte jemand sagen wo mein Fehler liegt?

In deiner Denke.

'.foo:first-child' selektiert nicht das erste Element der Klasse "foo", sondern alle Elemente, die der Klasse "foo" angehören _und_ erstes Kindelement sind. Bei dir also gar keins:

<ul>  
    <li>test</li>

Dieses ist das erste Kindelement.

<li class="foo"><h3>test</h3></li>

Dieses Element gehört der Klasse "foo" an.

Qapla'

[Beat]

.foo:first-child {

border:1px solid red;
}

  
.foo:first-child  
und  
.foo :first-child  
  
Denke darüber nach, was du willst.  
  

> ~~~html

<ul>  

>     <li>test</li>  
>     <li class="foo"><h3>test</h3></li>  
> </ul>

mfg Beat

[apsel]

Om nah hoo pez nyeetz, Beat!

.foo:first-child und .foo :first-child

vielleicht wegen der Vollständigkeit besser

.foo *:first-child?

Matthias

[suit]

vielleicht wegen der Vollständigkeit besser

.foo *:first-child?

Wozu?

ansonsten könntest du auch gleich mit html>head~body li.foo>h3:first-child daherkommen, damits "vollständiger" ist :p

[Beat]

ansonsten könntest du auch gleich mit html>head~body li.foo>h3:first-child daherkommen, damits "vollständiger" ist :p

inline ist übervollständiger !

mfg Beat

[suit]

inline ist übervollständiger !

Ich kann dir nicht folgen.

[Beat]

inline ist übervollständiger !

Ich kann dir nicht folgen.

von übervollständiger nach überflüssig.
War ein joke.

mfg Beat

[Gunnar Bittersmann]

@@apsel:

nuqneH

vielleicht wegen der Vollständigkeit besser
.foo *:first-child?

Warum inkonsequent?

Was soll daran besser sein? Cf. [CSS2 §5.3]

Qapla'

[apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

.foo :first-child?

so 'ne einsame Pseudoklasse, die weiß ja vielleicht garnicht zu wem sie gehört.

Matthias

[Beat]

.foo :first-child?

so 'ne einsame Pseudoklasse, die weiß ja vielleicht garnicht zu wem sie

Ach so:

.foo > :first-child

mfg Beat

[Gunnar Bittersmann]

@@apsel:

nuqneH

so 'ne einsame Pseudoklasse, die weiß ja vielleicht garnicht zu wem sie gehört.

?? Doch, sie weiß, zu wem sie gehört: zu jedem Element.

Wie du dem verlinkten Abschnitt der CSS-Spec entnehmen konntest, ist ':first-child' identisch zu '*:first-child'.

Und warum du beim Pseudoklassenselektor '*' davorschreiben wolltest, beim Klassenselektor '.foo' aber nicht ('*.foo'), hast du auch noch nicht beantwortet.

Qapla'

[apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

?? Doch, sie weiß, zu wem sie gehört: zu jedem Element.

Wie du dem verlinkten Abschnitt der CSS-Spec entnehmen konntest, ist ':first-child' identisch zu '*:first-child'.

Ja.

Und warum du beim Pseudoklassenselektor '*' davorschreiben wolltest, beim Klassenselektor '.foo' aber nicht ('*.foo'), hast du auch noch nicht beantwortet.

Jetzt weiß ich auch, was die Frage "warum inkonsequent?" bedeuten soll.

Matthias