Сброс Zebra Css Design с элементами списка

Question

Я хочу использовать дизайн зебры для своих элементов списка. Но я хочу перезапустить свой дизайн зебры, когда у меня есть li с "resetZebra".

Я попробовал этот трюк css, но он не работает.

li:not(.select-group-item):nth-child(even){
          background: red;
 }
.resetZebra{
     background: green !important;
 }

<ul>
<li class="resetZebra">Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="resetZebra">Example</li>
<li>Example</li>
<li>Example</li>
<li class="resetZebra">Example</li>
<li>Example</li>
<li>Example</li>
</ul>

Как мне сделать этот трюк с css? Есть предложения?

Редактировать: я хочу начать с фона белого списка после resetZebraэлементы каждый раз. Например, в этом дереве dom второй должен быть белым, а три должны быть красным.

Answer 1

Вы можете попробовать приведенное ниже решение, изменив нужные цвета

var nextColor ="#00FF00" ;
$('.zebralist').children().each(function(index,child){
    if($(child).hasClass("resetZebra")){
    nextColor ="#00FF00";
  } else {
    if(nextColor === "#00FF00"){
        child.style.backgroundColor = "#00FF00";
      nextColor = "#FF0000"
    } else{
    child.style.backgroundColor = "#FF0000";
      nextColor = "#00FF00"
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="zebralist">
<li class="resetZebra">Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="resetZebra">Example</li>
<li>Example</li>
<li>Example</li>
<li class="resetZebra">Example</li>
<li>Example</li>
<li>Example</li>
</ul>