Verwirrung mit p:nth-child odd und even

[Linuchs]

Hallo,

da eine komplizierte CSS-Zuordnung mit p:nth-child() nicht funktioniert, bin ich wieder ganz zurück an der Basis:
odd und even

Der odd-Hintergrund sollte eigentlich rot sein, ist aber blau (bei Firefox + Opera)

Mit Google Translate habe ich mich schlau gemacht, dass ich nicht spinne: odd = ungerade. Darunter verstehe ich 1, 3, 5, ...

Ich möchte den ersten p gelb hinterlegen:

p:nth-child(odd) {  
  background:#f00;  
}  
p:nth-child(even) {  
  background:#0f0;  
}  
p:nth-child(1) {  
  background:#ff0;  
}  

Klappt nicht. Wenn ich den zweiten p gelb hinterlege, wird der erste gelb. Irgendwie bin ich neben der Spur.

So kann ich natürlich kein gültiges CSS programmieren.

Linuchs.

[1UnitedPower]

Meine Herren!

Klappt nicht.

Klappt in meinem Online-Beispiel.

Wenn ich den zweiten p gelb hinterlege, wird der erste gelb. Irgendwie bin ich neben der Spur.

CSS' nth-child fängt bei 1 an zu zählen nicht bei 0. Das zweite Kind würdest du also mit nth-child(2) selektieren.

Zeig mal das HTML dazu, oder pass das Online-Beispiel so an, dass es auf deinen Testfall passt.

[Linuchs]

Mein Herr!

Klappt in meinem Online-Beispiel.

Ja, bei dir klappt zufällig

  
 irgendwas:nth-child(odd) {  
  background:#f00;  
}  

Aber in meinem verlinkten Beispiel ist vor dem ersten p noch ein h1 - keine Ahnung, was Firefox und Opera auf dem Weg zum ersten p noch alles mitzählen.

Ein CSS-Bug oder ein Konzept, das ich nicht verstanden habe?

Linuchs

[1UnitedPower]

Meine Herren!

Aber in meinem verlinkten Beispiel ist vor dem ersten p noch ein h1 - keine Ahnung, was Firefox und Opera auf dem Weg zum ersten p noch alles mitzählen.

Ein CSS-Bug oder ein Konzept, das ich nicht verstanden habe?

Letzteres. Bei nth-child werden alle Kinder gezählt. Du suchst vermutlich eher die Pseudoklasse :nth-of-type()

[MudGuard]

Hi,

Aber in meinem verlinkten Beispiel ist vor dem ersten p noch ein h1 - keine Ahnung, was Firefox und Opera auf dem Weg zum ersten p noch alles mitzählen.

kann es sein, daß Du nth-child mit nth-of-type verwechselst?

(wäre leichter zu analysieren, wenn Du auf die Aufforderung, Dein HTML zu zeigen, reagieren würdest ...)

cu,
Andreas

[Linuchs]

Hi, Andreas

kann es sein, daß Du nth-child mit nth-of-type verwechselst?

Ja.

(wäre leichter zu analysieren, wenn Du auf die Aufforderung, Dein HTML zu zeigen, reagieren würdest ...)

siehe Eingangspost: odd und even

Linuchs

[1UnitedPower]

Meine Herren!

siehe Eingangspost: odd und even

Oh, ich hab gar nicht gewusst, dass w3schools so eine Online-Spielewiese hat. Ich habe nur beim Hovern nur "w3schools" gelesen und den Link dann reflexartig ignoriert. Sorry, da war ich unaufmerksam.

[MudGuard]

Hi,

Oh, ich hab gar nicht gewusst, dass w3schools so eine Online-Spielewiese hat. Ich habe nur beim Hovern nur "w3schools" gelesen und den Link dann reflexartig ignoriert. Sorry, da war ich unaufmerksam.

Ging mir genauso - w3schools hat keinen guten Ruf. Und ich dachte, daß das der Link auf die Beschreibung von odd und even (bzw. das, was w3schools für eine Beschreibung von odd/even hält) ist ...

cu,
Andreas

[ChrisB]

Hi,

p:nth-child(odd) {

background:#f00;
}
p:nth-child(even) {
  background:#0f0;
}
p:nth-child(1) {
  background:#ff0;
}

>   
> Klappt nicht. Wenn ich den zweiten p gelb hinterlege, wird der erste gelb.  
  
Wo bitte „hinterlegst“ du das zweite P-Element mit Gelb?  
  
MfG ChrisB  
  

-- 
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/