Tenho o código abaixo, está funcionando perfeitamente, o único problema é que se eu adicionar mais uma li ou mais algumas ele muda a sua formatação. Gostaria que ficasse igual está agora, só que independente de quantas LIs existirem. Gostaria que o fundo ficasse igual o que está agora no exemplo, mas sempre independente da quantidade de li, caso queiram testar, somente aumentar as li e verá que o background preto vai mudar de posição.
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>