Cibler 2 lignes sur 4 d'un tableau

[Résolu/Fermé]
Signaler
Messages postés
528
Date d'inscription
vendredi 29 janvier 2016
Statut
Membre
Dernière intervention
20 septembre 2020
-
Messages postés
528
Date d'inscription
vendredi 29 janvier 2016
Statut
Membre
Dernière intervention
20 septembre 2020
-
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.


1 réponse

Messages postés
33473
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 septembre 2021
3 719
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42674 internautes nous ont dit merci ce mois-ci

Messages postés
528
Date d'inscription
vendredi 29 janvier 2016
Statut
Membre
Dernière intervention
20 septembre 2020
203
Cela fonctionne à merveille. Merci beaucoup Jordane45