Cibler 2 lignes sur 4 d'un tableau Résolu/Fermé

Question

Bonjour, 

La question est dans le titre. Je suis en train de réaliser un tableau pour lequel je souhaite alterner 2 lignes sur 4 avec un fond d'une couleur et les deux autres lignes avec un fond d"une autre couleur. (lignes 1 et 2 en bleu, lignes 3 et 4 en vert, lignes 5 et 6 en bleu, lignes 7 et 8 en vert, etc...) . La seule solution que j'ai trouvé pour l'instant est de cibler ligne par ligne 
table > tbody > tr:nth-child(1),table > tbody > tr:nth-child(2),table > tbody > tr:nth-child(5),table > tbody > tr:nth-child(6)/* etc... etc.. */{background-color:blue;}table > tbody > tr:nth-child(3),table > tbody > tr:nth-child(4),table > tbody > tr:nth-child(7),table > tbody > tr:nth-child(8)/* etc... etc.. */{background-color:green;}

Cela risque de deviner vite fastidieux. C'est pourquoi je recherche une solution plus rapide dans le même genre que celle qui permet de cibler une ligne sur 2 avec le ::nth-child(2n)   si cela est possible.

Merci par avance pour vos bons conseils. 


Configuration: Linux / Firefox 59.0

jordane45 · Answer

Bonjour,
Tu peux utiliser du ntchild(n) et n-1
par exemple :

table > tbody > tr:nth-child(4n), div:nth-child(4n-1) {
    background: green;
}
table > tbody > tr:nth-child(4n-2), div:nth-child(4n-3) {
    background: blue;
}

Cibler 2 lignes sur 4 d'un tableau

1 réponse

Discussions similaires