nicht angemeldet
suit
Gunnar Bittersmann
suit
suit
Der Martin
Gunnar Bittersmann
suit
suit
Gunnar Bittersmann
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
Könnte mir bitte jemand sagen wo mein Fehler liegt?
Vor allem: Was erwartest du von deinem Code in welchem Browser?
@@suit:
nuqneH
?? 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'
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.
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
Ich möchte das h3-Element ansprechen. Habs aber geschafft.
Dann ist ja gut - also hatte Gunnar unrecht :p WIN
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
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
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.
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
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.
@@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'
.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
Om nah hoo pez nyeetz, Beat!
.foo:first-child und .foo :first-child
vielleicht wegen der Vollständigkeit besser
.foo *:first-child?
Matthias
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
ansonsten könntest du auch gleich mit
html>head~body li.foo>h3:first-childdaherkommen, damits "vollständiger" ist :p
inline ist übervollständiger !
mfg Beat
inline ist übervollständiger !
Ich kann dir nicht folgen.
inline ist übervollständiger !
Ich kann dir nicht folgen.
von übervollständiger nach überflüssig.
War ein joke.
mfg Beat
@@apsel:
nuqneH
vielleicht wegen der Vollständigkeit besser
.foo *:first-child?
Warum inkonsequent?
Was soll daran besser sein? Cf. [CSS2 §5.3]
Qapla'
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
.foo :first-child?
so 'ne einsame Pseudoklasse, die weiß ja vielleicht garnicht zu wem sie
Ach so:
.foo > :first-child
mfg Beat
@@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'
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