En utilisant nth-child pour sélectionner un pair, puis un nombre impair d'éléments

j'essaie de faire la liste des articles dans cet ordre précis:

1: Blanc

2: Blanc

3: Bleu

4: Bleu

5: Bleu

6: Blanc

7: Blanc

8: Bleu

9: Bleu

10: Blue

11: Blanc

12: Blanc

Le modèle est [1-2] [3-4-5] [6-7] [8-9-10]

Ma structure html est un simple liste:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ce schéma est-il possible en utilisant css nth-child? Si oui, à quoi ressemblerait mon sélecteur?

23
demandé sur TylerH 2014-12-01 19:34:42

4 réponses

un code plus court pour la même sortie serait : 

li {
  color: white;
}
li:nth-child(5n-3),
li:nth-child(5n-4) {
  color: blue;
}


li {
  color: white;
}
li:nth-child(5n-4),
li:nth-child(5n-3) {
  color: blue;
}
/** FOR THE DEMO **/

body {
  background: grey;
}
<ul>
  <li>1. text</li>
  <li>2. text</li>
  <li>3. text</li>
  <li>4. text</li>
  <li>5. text</li>
  <li>6. text</li>
  <li>7. text</li>
  <li>8. text</li>
  <li>9. text</li>
  <li>10. text</li>
  <li>11. text</li>
  <li>12. text</li>
</ul>

le point est que vous n'avez pas besoin de spécifier à quel élément la couleur blanche devrait s'appliquer, mais juste ceux qui doivent être bleus car il va remplacer la couleur blanche "par défaut".

15
répondu web-tiki 2015-03-06 11:30:24

Essaie:

ul li:nth-child(5n),
ul li:nth-child(5n-1),
ul li:nth-child(5n-2) {
color:rgb(0,0,255);
}

ul li:nth-child(5n-3),
ul li:nth-child(5n-4) {
color:rgb(255,255,255);
}
25
répondu Rounin 2017-07-13 13:51:25

Essayez comme ceci:

li:nth-child(5n - 4),
li:nth-child(5n - 3)  {
    color: white;
}

li:nth-child(5n - 2),
li:nth-child(5n - 1),
li:nth-child(5n)  {
    color: blue;
}

Live Example: http://codepen.io/anon/pen/vENgbx

9
répondu fcalderan 2014-12-01 16:45:56

[la Pensée à voix haute]

  • tous les 5 éléments à partir de 1 sont blancs
  • tous les 5 éléments à partir de 2 sont blancs
  • tous les 5 éléments à partir de 3 sont bleus
  • tous les 5 éléments à partir de 4 sont bleus
  • tous les 5 éléments à partir de 5 sont bleus

afin de traduire ce motif répétitif en :nth-child(an+b), il nous faut cinq sélecteurs:

  • a sera 5
  • b sera de 1 à 5

et le résultat:

li:nth-child(5n+1),
li:nth-child(5n+2) {
  background-color: #FFF;
}
li:nth-child(5n+3),
li:nth-child(5n+4),
li:nth-child(5n+5) {
  background-color: #00F;
}
<ul>
  <li>1: White</li>
  <li>2: White</li>
  <li>3: Blue</li>
  <li>4: Blue</li>
  <li>5: Blue</li>
  <li>6: White</li>
  <li>7: White</li>
  <li>8: Blue</li>
  <li>9: Blue</li>
  <li>10: Blue</li>
  <li>11: White</li>
  <li>12: White</li>
</ul>
4
répondu Salman A 2014-12-02 06:03:56