Cibler 2 lignes sur 4 d'un tableau

Résolu/Fermé
Volpe_Lupo Messages postés 530 Date d'inscription vendredi 29 janvier 2016 Statut Membre Dernière intervention 20 septembre 2020 - 14 avril 2018 à 14:21
Volpe_Lupo Messages postés 530 Date d'inscription vendredi 29 janvier 2016 Statut Membre Dernière intervention 20 septembre 2020 - 14 avril 2018 à 16:45
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.


A voir également:

1 réponse

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
14 avril 2018 à 15:51
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;
}

1
Volpe_Lupo Messages postés 530 Date d'inscription vendredi 29 janvier 2016 Statut Membre Dernière intervention 20 septembre 2020 208
14 avril 2018 à 16:45
Cela fonctionne à merveille. Merci beaucoup Jordane45
0