Sélection du nième-enfant d'une liste potentiellement infinie d'enfants

Question

J'ai une disposition de grille - 4 colonnes par rangée. J'utilise la disposition de la grille CSS.

Dites qu'il pourrait potentiellement y avoir un nombre infini d'éléments. Comment puis-je sélectionner les deux éléments intermédiaires de chaque ligne si le nombre d'éléments est potentiellement infini. Par exemple, pour les trois premières lignes je aurais besoin de choisir:

nth-child(2), nth-child(3), nth-child(6), nth-child(7), nth-child(10), nth-child(11)

Je pourrais coder en dur les styles jusqu'à un nombre précis en supposant qu'il n'y aurait pas un nombre infini, mais s'il y a un moyen de le faire dynamiquement, je préfère le faire.

Answer 1

Vous pouvez utiliser .item:nth-child(4n+2) pour cibler tous les quatre enfants (à partir de l'enfant 2'nd) et .item:nth-child(4n+3) pour cibler chaque quatrième enfant (début de l'enfance 3'rd). Voici l'exemple:

.item:nth-child(4n+2) { 
 
    color: red; 
 
    background-color: yellow; 
 
} 
 

 
.item:nth-child(4n+3) { 
 
    color: red; 
 
    background-color: yellow; 
 
}

<div class="grid"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 
    <div class="item">10</div> 
 
    <div class="item">11</div> 
 
    <div class="item">12</div> 
 
</div>

Answer 2

Après est une solution js:

var items = document.getElementsByClassName('item'); 
 
for (i = 0; i < items.length; i++) { 
 
    if(i % 2 === 0 && i % 4 === 0) { 
 
    var el1 = items[i + 1]; 
 
    var el2 = items[i + 2]; 
 
    if (el1) 
 
     el1.style.backgroundColor = "red"; 
 
    if (el2) 
 
     el2.style.backgroundColor = "red"; 
 
    } 
 
}

.grid { 
 
    display:grid; 
 
    grid-template-columns: 100px 100px 100px 100px; 
 
} 
 

 
.item { 
 
    border:1px solid black; 
 
    padding:20px; 
 
    margin:4px; 
 
}

<div class="grid"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

Answer 3

En utilisant la syntaxe nth-child(xN+y) ...

.container { 
 
    display: grid; 
 
    grid-template-columns: repeat(4, 1fr); 
 
    grid-gap: 25px; 
 
} 
 

 
.box { 
 
    padding: 1em; 
 
    border: 1px solid grey; 
 
} 
 

 
.container :nth-child(4n+2) { 
 
    background: red; 
 
} 
 

 
.container :nth-child(4n+3) { 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>