Использование nth-child для выбора четного, а затем нечетного числа элементов

Я пытаюсь упорядочить элементы списка в этом конкретном порядке:

1: Белый
2: Белый
3: Синий
4: Синий
5: Синий
6: Белый
7: Белый
8: Синий
9: Синий
10: Синий
11: Белый
12: Белый

Образец - [1-2] [3-4-5] [6-7] [8-9-10]

Моя структура html - это простой список:

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

Можно ли использовать этот шаблон с помощью css nth-child? Если да, то каков будет мой селектор?

Ответы

Ответ 1

Более короткий код для того же выхода будет:

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>

Ответ 2

Try:

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);
}

Ответ 3

Попробуйте сделать так:

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: http://codepen.io/anon/pen/vENgbx

Ответ 4

[Мышление вслух]

Каждый пятый элемент, начинающийся с 1, белый
Каждый пятый элемент, начинающийся с 2, является белым.
Каждый пятый элемент, начинающийся с 3, является синим.
Каждый пятый элемент, начиная с 4, является синим.
Каждый пятый элемент, начинающийся с 5, является синим.

Чтобы перевести этот повторяющийся шаблон в :nth-child(an+b), нам нужно пять селекторов:

a будет 5
b будет от 1 до 5

И результат:

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>