Problems in nth child

Question

Problems in nth child

Navigation

#1 by (3 votes)

0

I have the code below, it's working perfectly, the only problem is that if I add one more or a few li it changes its formatting. I wish it would stay the same now, except regardless of how many LIs exist. I would like the background to be the same as the one in the example, but always regardless of the amount of li, in case 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>

javascript html jquery css css3

asked by anonymous 22.06.2016 / 16:44

1 answer

I always want to delete the first index with each click of a button. How do I do? Routes with AngularJS and Node.js

score 3 · Accepted Answer

Changing your selector from nth-last-of-type to 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>Adicionarli</button><ul><liclass="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 li s at will to observe behavior

The nth-last-of-type switch, depending on the documentation, begins counting from of the last child to whom it corresponds. This count backward that causes this strange behavior when you add% s to% s at the end. By doing the same selector, but counting from the first child (i.e., the code that i inserted into the snippet), this problem is circumvented.