1

Tenho uma li e queria pegar os elementos que estão escritos MARCADO abaixo. Porém usei o nth-of-type, funciona para pegar o 4 elemento sempre, porém não consegui fazer pegar o próximo. Alguém conseguiria me ajudar a pegar sempre 1 depois do primeiro item onde está escrito marcado?

 ul li&:nth-of-type(1){color: red;}
 ul li&:nth-of-type(4n){color: red;}
<ul>   
  <li class="col-sm-3">number MARCADO</li>
   <li class="col-sm-3">number</li>
   <li class="col-sm-3">number</li>
   <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
   <li class="col-sm-3">number</li>
   <li class="col-sm-3">number</li>
   <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
   <li class="col-sm-3">number MARCADO</li>
   <li class="col-sm-3">number</li>
   <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
   <li class="col-sm-3">number MARCADO</li>
   <li class="col-sm-3">number MARCADO</li>
   <li class="col-sm-3">number</li>
  </ul>

2 Respostas 2

1

para o seu caso, você precisa pegar a cada 5 elementos, e não a cada 4 elementos, desta forma você também vai fazer um seletor para o elemento anterior (5n - 1)

ul li:nth-of-type(1){color: red;}
ul li:nth-of-type(5n - 1){color: red;}
ul li:nth-of-type(5n){color: red;}
<ul>   
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
</ul>

1
  • Obrigado, funcionou!!
    – concas
    4/02/2016 às 15:55
1

Tente utilizar o :nth-child assim:

ul li:nth-child(1) {
  color: red;
}
ul li:nth-child(4) {
  color: red;
}
ul li:nth-child(5) {
  color: red;
}
ul li:nth-child(9) {
  color: red;
}
ul li:nth-child(10) {
  color: red;
}
ul li:nth-child(14) {
  color: red;
}
ul li:nth-child(15) {
  color: red;
}
<ul>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number MARCADO</li>
  <li class="col-sm-3">number</li>
</ul>

3
  • Essas LI's podem ser cadastráveis, ou seja, podem ter milhoes de li's. Aí não ocnseguiria fazer assim.
    – concas
    3/02/2016 às 17:30
  • Qual é o padrão ? se você deseja uma sim/outra não você pode usar ul li:nth-child(2n){ color: red; } 3/02/2016 às 17:30
  • Se não tiver um padrão certo e somente houver uma marcação no texto indicando que ela deva possuir tal configuração acredito que você terá que verificar o valor com javascript e adicionar o css 3/02/2016 às 17:31

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 .