Utilisation de nth-child css sur la table dynamique React

Question

Je n'arrive pas à obtenir l'effet des sélecteurs nth-child ou nth-of-type dans une liste de divs.

Je travaille dans un React application et un composant représentant un seul élément dans une collection qui rend la structure HTML suivant:

<div className="link-row"> 
    <div className="link-row-header-container"> 
    <div className="header-name"></div> 
    <div className="header-info"></div> 
    </div> 
    <div className="link-container"> 
    <div className="left-inner-container"> //this is the container i'm trying to select 
    </div> 
    <div className="right-inner-container"> 
    </div> 
    </div> 
    <div className="link-row-footer-container"> 
    <span> footer stuff </span> 
    </div> 
</div> 

j'ai une fonction dans un composant externe mappage du composant ci-dessus sur une collecte de données et de les placer dans un seul <div> comme ceci:

<div> {linkList} </div> 

Je suis en train d'alterner la couleur d'arrière-plan « -conteneur intérieur gauche » dans des séquences de trois, mais je reçois toujours seulement une seule couleur à travers chacun d'eux.

Voici mon CSS:

.left-inner-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 50px; 
    height: 50px; 
    border-right-style: solid; 
    border-right-width: 2px; 
    border-right-color: #450037; 
} 

.left-inner-container:nth-of-type(3n+1) {background-color: #ff5e39;} 
.left-inner-container:nth-of-type(3n+2) {background-color: #00d2d1;} 
.left-inner-container:nth-of-type(3n+3) {background-color: #ffffff;} 

Answer 1

Il est évident que vous obtenez toutes les couleurs même parce que left-inner-container est toujours le first-child de son conteneur parent .

Je vous propose de prendre votre conteneur link-row pour cibler le sélecteur nth-of-type. Voir une démo HTML-CSS simplifié ci-dessous:

.link-row { 
 
    border-bottom: 1px solid red; 
 
    background: #ddd; 
 
} 
 

 
.left-inner-container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-right-style: solid; 
 
    border-right-width: 2px; 
 
    border-right-color: #450037; 
 
} 
 

 
.link-row:nth-of-type(3n+1) .left-inner-container { 
 
    background-color: #ff5e39; 
 
} 
 

 
.link-row:nth-of-type(3n+2) .left-inner-container { 
 
    background-color: #00d2d1; 
 
} 
 

 
.link-row:nth-of-type(3n+3) .left-inner-container { 
 
    background-color: #ffffff; 
 
}

<div class="wrapper"> 
 

 
    <div class="link-row"> 
 
    <div class="link-row-header-container"> 
 
     <div class="header-name">header</div> 
 
     <div class="header-info">info</div> 
 
    </div> 
 
    <div class="link-container"> 
 
     <div class="left-inner-container">left</div> 
 
     <div class="right-inner-container">right</div> 
 
    </div> 
 
    <div class="link-row-footer-container"> 
 
     <span> footer stuff </span> 
 
    </div> 
 
    </div> 
 

 
    <div class="link-row"> 
 
    <div class="link-row-header-container"> 
 
     <div class="header-name">header</div> 
 
     <div class="header-info">info</div> 
 
    </div> 
 
    <div class="link-container"> 
 
     <div class="left-inner-container">left</div> 
 
     <div class="right-inner-container">right</div> 
 
    </div> 
 
    <div class="link-row-footer-container"> 
 
     <span> footer stuff </span> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="link-row"> 
 
    <div class="link-row-header-container"> 
 
     <div class="header-name">header</div> 
 
     <div class="header-info">info</div> 
 
    </div> 
 
    <div class="link-container"> 
 
     <div class="left-inner-container">left</div> 
 
     <div class="right-inner-container">right</div> 
 
    </div> 
 
    <div class="link-row-footer-container"> 
 
     <span> footer stuff </span> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="link-row"> 
 
    <div class="link-row-header-container"> 
 
     <div class="header-name">header</div> 
 
     <div class="header-info">info</div> 
 
    </div> 
 
    <div class="link-container"> 
 
     <div class="left-inner-container">left</div> 
 
     <div class="right-inner-container">right</div> 
 
    </div> 
 
    <div class="link-row-footer-container"> 
 
     <span> footer stuff </span> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="link-row"> 
 
    <div class="link-row-header-container"> 
 
     <div class="header-name">header</div> 
 
     <div class="header-info">info</div> 
 
    </div> 
 
    <div class="link-container"> 
 
     <div class="left-inner-container">left</div> 
 
     <div class="right-inner-container">right</div> 
 
    </div> 
 
    <div class="link-row-footer-container"> 
 
     <span> footer stuff </span> 
 
    </div> 
 
    </div> 
 
    
 
    
 
</div>