Comment sélectionner des lignes paires avec des éléments de liste

J’ai la mise en page suivante avec une liste non ordonnée:

https://codepen.io/barkins/pen/qjrpKJ

ul{ max-width:1200px; list-style:none; margin:0 auto; padding:0; display:flex; flex-wrap:wrap; } li{ width:12%; @media (max-width:720px){ width:16%; } @media (max-width:480px){ width:22%; } } 

Je dois sélectionner uniquement les lignes, quels que soient les points de rupture de la requête multimédia, pour append une bordure à la deuxième ligne uniquement.

 .second-row-items{ border:1px solid red; } 

Est-ce possible de faire avec CSS et peut-être JavaScript (jQuery)?


J’ai essayé d’utiliser la règle CSS suivante pour sélectionner manuellement la deuxième ligne. Cependant, il serait préférable de le faire automatiquement avec JavaScript, d’une manière ou d’une autre, et de sélectionner idéalement toutes les autres lignes paires.

 &:nth-child(n+9):nth-child(-n+16){ border:1px solid red; } 

Puisque vous utilisez SCSS, vous pouvez utiliser une boucle pour générer vos sélecteurs: nth-child (xn + x): https://codepen.io/anon/pen/VWpQbY?editors=1100

 li { width: 12%; @for $i from 1 through 8 { &:nth-child(16n + #{$i}) { background: red; } } @media (max-width: 720px) { width: 16%; &:nth-child(1n) { background: none;/* reset previous rule */ } @for $i from 1 through 6 { &:nth-child(12n + #{$i}) { background: red; } } } @media (max-width: 480px) { width: 22%; &:nth-child(1n) { background: none;/* reset previous rule */ } @for $i from 1 through 4 { &:nth-child(8n + #{$i}) { background: red; } } } } 

Cela devrait faire le travail si vous voulez sélectionner uniquement la deuxième ligne:

 @media (max-width:480px) { li:nth-child(5), li:nth-child(6), li:nth-child(7), li:nth-child(8) { background-color: red; } } @media (min-width:481px) and (max-width:720px) { li:nth-child(7), li:nth-child(8), li:nth-child(9), li:nth-child(10), li:nth-child(11), li:nth-child(12) { background-color: red; } } @media (min-width:721px) { li:nth-child(9), li:nth-child(10), li:nth-child(11), li:nth-child(12), li:nth-child(13), li:nth-child(14), li:nth-child(15), li:nth-child(16) { background-color: red; } } 

Et si vous voulez toutes les lignes paires, utilisez:

 @media (max-width:480px) { li:nth-child(8n-3), li:nth-child(8n-2), li:nth-child(8n-1), li:nth-child(8n) { background-color: red; } } @media (min-width:481px) and (max-width:720px) { li:nth-child(12n-5), li:nth-child(12n-4), li:nth-child(12n-3), li:nth-child(12n-2), li:nth-child(12n-1), li:nth-child(12n) { background-color: red; } } @media (min-width:721px) { li:nth-child(16n-7), li:nth-child(16n-6), li:nth-child(16n-5), li:nth-child(16n-4), li:nth-child(16n-3), li:nth-child(16n-2), li:nth-child(16n-1), li:nth-child(16n), { background-color: red; } } 

Sélection d’éléments dans la deuxième ligne uniquement avec CSS (spécifique au point d’arrêt)

Il est impossible de sélectionner les éléments de la deuxième ligne, quels que soient les points d’arrêt de la requête multimédia. Vous devez donc créer des sélecteurs pour les éléments de cette ligne pour chaque point d’arrêt.

Vous pouvez utiliser deux pseudo-classes de :nth-child pour sélectionner une plage d’éléments. Par exemple:

 li:nth-child(n + 7):nth-child(-n + 12) 

Sélectionne les éléments 7 à 12 , tous deux inclus. C’est la deuxième ligne si vous avez 6 colonnes.

 img { max-width:100%; height:auto; } ul { max-width:1200px; list-style:none; margin:0 auto; padding:0; display:flex; flex-wrap:wrap; } li { width:12%; font-size: 0; } @media (min-width: 721px) { li:nth-child(n+9):nth-child(-n+16) { margin: 4px 0; padding: 16px 0; background: cyan; } } @media (max-width: 720px) { li { width: 16%; } li:nth-child(n+7):nth-child(-n+12) { margin: 4px 0; padding: 16px 0; background: red; } } @media (max-width: 480px) { li { width: 22%; } li:nth-child(n+5):nth-child(-n+8) { margin: 4px 0; padding: 16px 0; background: yellow; } } 
 

La clé est de savoir combien d’images seront dans chaque ligne sur chaque point d’arrêt.

Si l’écran est grand, vous avez 6 éléments dans une rangée, puis vous voulez souligner 7 à 12 (la deuxième rangée), mais pas 13-18, mais 19-24, etc. Pour un support moyen, il peut être de 4. Petit 2, Extra petit, 1 (juste un exemple).

Vous pouvez utiliser Javascript pour sélectionner ces lignes et y append votre classe .second-row-items .

Vous devrez peut-être prendre la largeur du conteneur et le diviser par la largeur des images pour savoir combien d’éléments peuvent tenir dans une ligne ( n ), puis prendre le nombre total d’éléments et le diviser par le nombre d’éléments qui correspondent dans une ligne pour obtenir le nombre de lignes. Ensuite, vous pourriez écrire une fonction qui sélectionne chaque nth enfant (pour obtenir la ligne) et tous les nth frères (pour obtenir la ligne entière) afin d’append votre classe.

Si vous voulez juste choisir even, allez avec: nth-child {even}

Dans votre cas, le code serait

 ul li:nth-child(even){ border: 1px solid black;}