Problems in Child Nth

Question

I have the code below, it is working perfectly, the only problem is that if I add one more read or a few more it changes its formatting. I wish it was the same now, but no matter how many Lis there are. I would like the background to be the same as what is now in the example, but always regardless of the amount of li, if you want to test, just increase the li and you will see that the black background will change position.

     ul {

       margin-top: 30px;

       width: 100%;

       float: left;

     }

     li {

       width: 50%;

       float: left;

       cursor: pointer;

     }

     li:nth-last-of-type(4n+1) {

       color: #fff;

       background: #000;

     }

     li:nth-last-of-type(4n+2) {

       color: #fff;

       background: #000;

     }

<ul>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica1</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica2</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica3</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica4</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica5</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica6</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12" <h2>Caixa Econômica</h2>
  </li>
</ul>

Answer 1

Changing your selector of nth-last-of-type for nth-child you solve the problem

// Apenas um facilitador para adicionar li s
$('button').click(function(){
  $('ul').append('<li class="col-md-6 col-sm-6 col-xs-12"> <h2>Caixa Econômica</h2></li>');
});

ul {
  margin-top: 30px;
  width: 100%;
  float: left;
}

li {
  width: 50%;
  float: left;
  cursor: pointer;
}

/* Juntei os dois seletores em um para facilitar a leitura */
li:nth-child(4n+1), li:nth-child(4n+2) {
  color: #fff;
  background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Adicionar li</button>
<ul>
  <li class="col-md-6 col-sm-6 col-xs-12"> <h2>Caixa Econômica1</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12"> <h2>Caixa Econômica2</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12"> <h2>Caixa Econômica3</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12"> <h2>Caixa Econômica4</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12"> <h2>Caixa Econômica5</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12"> <h2>Caixa Econômica6</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12"> <h2>Caixa Econômica</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12"> <h2>Caixa Econômica</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12"> <h2>Caixa Econômica</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12"> <h2>Caixa Econômica</h2>
  </li>
  <li class="col-md-6 col-sm-6 col-xs-12"> <h2>Caixa Econômica</h2>
  </li>
  
</ul>

Add liis the will to observe behavior

The selector nth-last-of-type, according to the documentation, it starts from the last child to which it corresponds. This back-to-front count that causes this weird behavior when you add more lis at the end. By making the same selector, but counting from the first child (i.e., the code I entered into the snippet), this problem is circumvented.