2017-10-21 48 views
0

Dans SASS je veux changer la couleur de fond de chaque ligne paire d'articles.Dans SASS, je veux changer la couleur d'arrière-plan de chaque ligne paire d'articles

Ceci est mon HTML montre la vue de la grille d'une rangée de 3 articles

<ul> 
<li><li> <li><li> <li><li> 
<li><li> <li><li> <li><li> 
<li><li> <li><li> <li><li> 
<li><li> <li><li> <li><li> 
</ul> 

Ceci est mon SASS tentative:

.ul { 
    li { 
    background: $white; 

    &:nth-child(3) { 
     background: red; 
    } 
    } 
} 

Problème: est l'exemple ci-dessus fait seulement le troisième article.

Résultat Je veux:

Chaque ligne a de 3 li Je veux que chaque deuxième rangée de Li d'avoir une couleur de fond de rouge. Y at-il des maths que je peux faire sur : nth-child pour atteindre cet objectif dans SASS?

Répondre

3

Celui-ci fonctionne:

ul { 
    li { 
    background: white; 

     &:nth-child(6n-2), &:nth-child(6n-1),&:nth-child(6n) { 
     background: red; 
    } 
    } 
} 

S'il vous plaît noter également que vous avez .ul au lieu de ul

+0

Merci! cela a bien fonctionné – AngularM

+1

@AngularM veuillez marquer la réponse comme acceptée afin qu'il soit plus facile pour les utilisateurs avec des questions similaires de décider si la solution est acceptable pour eux – Flying