Обратный четно-нечетный шаблон после каждого элемента nth-child

Question

У меня есть структура HTML, показывающая по 4 блока в каждой строке, а цвет фона блоков задан как CSS четный и нечетный (красный и зеленый).

Можно ли изменить Even and Odd TO Odd and Even после каждого четвертого пункта?

JSFiddle here

Примечание: Мы не можем изменить структуру HTML.

<ul> 
    <li>bg color RED</li> 
    <li>bg color Green</li> 
    <li>bg color RED</li> 
    <li>bg color Green</li> 
    <li>bg color Green</li> 
    <li>bg color RED</li> 
    <li>bg color Green</li> 
    <li>bg color RED</li> 
    <li>bg color Green</li> 
    <li>bg color RED</li> 
    <li>bg color Green</li> 
    <li>bg color RED</li> 
</ul> 

Answer 1

Можно ли изменить четные и нечетные нечетный, чтобы даже после того, как каждый пункт четвертого?

Если вы имеете в виду, что в течение первых 4-х элементов нечетные элементы должны иметь красный фон в то время как даже те, должны иметь зеленый фон, и это становится местами для каждого набора из 4 элементов, то вы можете сделать это с помощью nth-child селекторов, как и в ниже фрагмент. Это можно сделать и с помощью nth-of-type.

ul{ 
 
    padding:0; 
 
    width:100%; 
 
} 
 
li{ 
 
    width:25%; 
 
    height:50px; 
 
    float:left; 
 
    border:1px solid black; 
 
    list-style:none; 
 
    box-sizing: border-box; 
 
} 
 
li:nth-child(8n+1),li:nth-child(8n+3), li:nth-child(8n+6), li:nth-child(8n){ 
 
    background: red; 
 
} 
 
li:nth-child(8n+2),li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7){ 
 
    background: green; 
 
}

<ul> 
 
<li>bg color RED</li> 
 
<li>bg color Green</li> 
 
<li>bg color RED</li> 
 
<li>bg color Green</li> 
 
<li>bg color Green</li> 
 
<li>bg color RED</li> 
 
<li>bg color Green</li> 
 
<li>bg color RED</li> 
 
<li>bg color RED</li> 
 
<li>bg color Green</li> 
 
<li>bg color RED</li> 
 
<li>bg color Green</li> 
 
</ul>

---

Или, если вы хотите сказать, что в течение первых четырех элементов нечетные элементы должны иметь красный фон в то время как даже те, имеют зеленый фон и после этого (то есть, с 5-го элемент on), нечетные элементы должны иметь зеленый фон, в то время как четные элементы должны иметь красный фон, тогда вы можете сделать это, как в приведенном ниже фрагменте.

ul { 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
li { 
 
    width: 25%; 
 
    height: 50px; 
 
    float: left; 
 
    border: 1px solid black; 
 
    list-style: none; 
 
    box-sizing: border-box; 
 
} 
 
li:nth-child(2), li:nth-child(4), li:nth-child(2n+5) { 
 
    background: green; 
 
} 
 
li:nth-child(1), li:nth-child(3), li:nth-child(2n+6) { 
 
    background: red; 
 
}

<ul> 
 
    <li>bg color RED</li> 
 
    <li>bg color Green</li> 
 
    <li>bg color RED</li> 
 
    <li>bg color Green</li> 
 
    <li>bg color Green</li> 
 
    <li>bg color RED</li> 
 
    <li>bg color Green</li> 
 
    <li>bg color RED</li> 
 
    <li>bg color Green</li> 
 
    <li>bg color RED</li> 
 
    <li>bg color Green</li> 
 
    <li>bg color RED</li> 
 
    <li>bg color Green</li> 
 
    <li>bg color RED</li> 
 
    <li>bg color Green</li> 
 
    <li>bg color RED</li> 
 
</ul>