Menu

Cibler 2 lignes sur 4 d'un tableau [Résolu]

Volpe_Lupo 474 Messages postés vendredi 29 janvier 2016Date d'inscription 12 juillet 2018 Dernière intervention - 14 avril 2018 à 14:21 - Dernière réponse : Volpe_Lupo 474 Messages postés vendredi 29 janvier 2016Date d'inscription 12 juillet 2018 Dernière intervention
- 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.


Afficher la suite 

Votre réponse

2 réponses

Meilleure réponse
jordane45 21619 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 14 juillet 2018 Dernière intervention - 14 avril 2018 à 15:51
1
Merci
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;
}

Merci jordane45 1

Avec quelques mots c'est encore mieux Ajouter un commentaire

CCM a aidé 22405 internautes ce mois-ci

Volpe_Lupo 474 Messages postés vendredi 29 janvier 2016Date d'inscription 12 juillet 2018 Dernière intervention - 14 avril 2018 à 16:45
Cela fonctionne à merveille. Merci beaucoup Jordane45
Commenter la réponse de jordane45