0

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>

1 Resposta 1

3

Mudando o seu seletor de nth-last-of-type para nth-child você resolve o problema

// 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>

Adicione lis a vontade para observar o comportamento

O seletor nth-last-of-type, conforme a documentação, começa a contar a partir do último filho ao qual ele corresponde. Essa contagem de trás pra frente que causa esse comportamento estranho quando você adiciona mais lis ao final. Fazendo o mesmo seletor, mas contando a partir do primeiro filho (i.e., o código que eu inseri no snippet), contorna-se este problema.

1
  • 1
    Que básico! Me preocupei tanto em não conseguir fazer com nth child que nem percebi o erro. Muito obrigado Caio!
    – concas
    Commented 22/06/2016 às 16:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .