: nth-child() Ausgabe jedes zweite div auswählen

Question

Ich versuche, jedes zweite div in meinem Container eine andere Hintergrundfarbe im Vergleich zu der ersten zu geben. Das Problem, das ich habe, ist, dass es einen JavaScript-Code zwischen den divs gibt. Hier ein Beispiel:

echo '<div class="holder">'; 
    echo '<script type="text/javascript"></script>'; 
    echo '<div class="list_item"></div>'; 
    echo '<script type="text/javascript"></script>'; 
    echo '<div class="list_item"></div>'; 
    echo '<script type="text/javascript"></script>'; 
    echo '<div class="list_item"></div>'; 
    echo '<script type="text/javascript"></script>'; 
    echo '<div class="list_item"></div>'; 
    echo '<script type="text/javascript"></script>'; 
    echo '<div class="list_item"></div>'; 
echo '</div>'; 

Wenn ich jetzt den folgenden CSS-Code hinzufügen:

.holder .list_item:nth-child(even) { 
    background-color:#fff; 
} 

es wird alles von dem divs gibt die weiße Hintergrundfarbe.

Hat jemand eine Idee, wie man das löst ???

P.S: Ich habe den css-Code auch in nth-child (ungerade) geändert, um es zu testen. Aber das hat auch nicht funktioniert.

Answer 1

Sie benötigen nth-of-type statt nth-child. Dies wird nur <div> Tags berücksichtigen, unabhängig davon, was dazwischen ist.

Answer 2

Die Pseudoklasse :nth-child() zählt alle Geschwister teilen die gleichen Eltern.

Da Sie mehrere Elementtypen im Container haben und nur auf die divs ausgerichtet sind, können Sie die Elemente script überspringen, indem Sie stattdessen :nth-of-type() verwenden.

:nth-of-type() stimmt nur mit Elementen des gleichen Typs überein. So

, wenn Sie sagen:

Ich versuche, jede Sekunde div in meinem Behälter verglichen, um eine andere Hintergrundfarbe zu geben, um den ersten.

versuchen, etwas wie folgt aus:

div:nth-of-type(even) 

Answer 3

Es gibt zwei untergeordnete Elemente pro Eintrag. Es gibt ein Script-Kind und ein Div-Kind. Sie könnte entweder die divs Adresse :nth-child(4n+1) (oder +3 für selbst), oder Sie könnten die Verwendung: n-of-Typselektor nur die div-Elemente-Adresse:

:nth-of-type(odd/even) {…}