Linuchs: Verwirrung mit p:nth-child odd und even

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.

  1. 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.

    --
    “All right, then, I'll go to hell.” – Huck Finn
    1. 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

      1. 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()

        --
        “All right, then, I'll go to hell.” – Huck Finn
      2. 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

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
        1. 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

          1. 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.

            --
            “All right, then, I'll go to hell.” – Huck Finn
            1. 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

              --
              Warum nennt sich Andreas hier MudGuard?
              O o ostern ...
              Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
  2. 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 :/