0

Estou tentando fazer em CSS3 com nth-child() o famoso "cor sim, cor não" em uma lista feita em Foundation 5. Acontece que no meio da lista haverá uma div na qual será um modal e essa div do modal acaba bagunçando o efeito "cor sim, cor não" fazendo a coluna ficar cinza, ao invés da linha.

#container>.row div:nth-child(2n) {
  background-color: #dcdcdc;
}

#container>.row div:nth-child(2n+1) {
  background-color: #fff;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<div id="container">
  <div class="row listPedidos">
    <div class="small-3 columns">
      a
    </div>
    <div class="small-3 columns">
      b
    </div>
    <div class="small-3 columns">
      c
    </div>
    <div class="small-3 columns">
      d
    </div>
  </div>
  <div>
    <!-- essa div é essencial. Ela será um modal contendo infos -->
  </div>
  <div class="row">
    <div class="small-3 columns">
      a
    </div>
    <div class="small-3 columns">
      b
    </div>
    <div class="small-3 columns">
      c
    </div>
    <div class="small-3 columns">
      d
    </div>
  </div>
  <div>
    <!-- essa div é essencial. Ela será um modal contendo infos -->
  </div>
  <div class="row">
    <div class="small-3 columns">
      a
    </div>
    <div class="small-3 columns">
      b
    </div>
    <div class="small-3 columns">
      c
    </div>
    <div class="small-3 columns">
      d
    </div>
  </div>
  <div>
    <!-- essa div é essencial. Ela será um modal contendo infos -->
  </div>
  <div class="row">
    <div class="small-3 columns">
      a
    </div>
    <div class="small-3 columns">
      b
    </div>
    <div class="small-3 columns">
      c
    </div>
    <div class="small-3 columns">
      d
    </div>
  </div>
  <div>
    <!-- essa div é essencial. Ela será um modal contendo infos -->
  </div>
  <div class="row">
    <div class="small-3 columns">
      a
    </div>
    <div class="small-3 columns">
      b
    </div>
    <div class="small-3 columns">
      c
    </div>
    <div class="small-3 columns">
      d
    </div>
  </div>
  <div>
    <!-- essa div é essencial. Ela será um modal contendo infos -->
  </div>
  <div class="row">
    <div class="small-3 columns">
      a
    </div>
    <div class="small-3 columns">
      b
    </div>
    <div class="small-3 columns">
      c
    </div>
    <div class="small-3 columns">
      d
    </div>
  </div>
  <div>
    <!-- essa div é essencial. Ela será um modal contendo infos -->
  </div>
</div>

2
  • :nth-child(number) { css declarations; } .... você está passando div:nth-child(2n).. o que é esse "n"? Commented 26/05/2017 às 16:48
  • Não sei explicar ao certo o que é o n, mas é um tipo de multiplicador. Funciona parecido com :nth-child(odd) e o :nth-child(even) Commented 26/05/2017 às 16:54

1 Resposta 1

1
  • Seu problema não é a div modal, visto que no CSS você seta a classe .row. O CSS está fazendo exatamente o que você manda, colorir uma coluna inteira de cinza e outra coluna inteira de branco. Para resolver de outra forma, faça o seguinte:
    • Faça uma classe padrão no CSS para coloração.
    • Coloque uma classe padrão juntamente ao "row" para cada lista que você quer colorir. Fazendo isso, você não mistura os outros "row" da página.
    • Utilize um jQuery para fazer uma lógica de coloração, por exemplo:

//Fazemos um loop nas suas listas (LINHAS).
$('.row.lista').each(function(i) {
  //Se a linha tiver resto da divisão um número PAR -> executa coloração das colunas. 
  if(i % 2 == 0)
  {
    ($(this).children()).each(function(j) {
      $(this).addClass("striped");
    });
  }
  //Assim teremos um aspecto cor sim, cor não para cada linha.
});
.striped {
  background-color: #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<div id="container">
  <div class="row lista">
    <div class="small-3 columns">
      a
    </div>
    <div class="small-3 columns">
      b
    </div>
    <div class="small-3 columns">
      c
    </div>
    <div class="small-3 columns">
      d
    </div>
  </div>
  <div>
    <!-- essa div é essencial. Ela será um modal contendo infos -->
  </div>
  <div class="row lista">
    <div class="small-3 columns">
      e
    </div>
    <div class="small-3 columns">
      f
    </div>
    <div class="small-3 columns">
      g
    </div>
    <div class="small-3 columns">
      h
    </div>
  </div>
  <div>
    <!-- essa div é essencial. Ela será um modal contendo infos -->
  </div>
  <div class="row lista">
    <div class="small-3 columns">
      a
    </div>
    <div class="small-3 columns">
      b
    </div>
    <div class="small-3 columns">
      c
    </div>
    <div class="small-3 columns">
      d
    </div>
  </div>
  <div>
    <!-- essa div é essencial. Ela será um modal contendo infos -->
  </div>
  <div class="row lista">
    <div class="small-3 columns">
      a
    </div>
    <div class="small-3 columns">
      b
    </div>
    <div class="small-3 columns">
      c
    </div>
    <div class="small-3 columns">
      d
    </div>
  </div>
  <div>
    <!-- essa div é essencial. Ela será um modal contendo infos -->
  </div>
  <div class="row lista">
    <div class="small-3 columns">
      a
    </div>
    <div class="small-3 columns">
      b
    </div>
    <div class="small-3 columns">
      c
    </div>
    <div class="small-3 columns">
      d
    </div>
  </div>
  <div>
    <!-- essa div é essencial. Ela será um modal contendo infos -->
  </div>
  <div class="row lista">
    <div class="small-3 columns">
      a
    </div>
    <div class="small-3 columns">
      b
    </div>
    <div class="small-3 columns">
      c
    </div>
    <div class="small-3 columns">
      d
    </div>
  </div>
  <div>
    <!-- essa div é essencial. Ela será um modal contendo infos -->
  </div>
</div>

2
  • É possível fazer em CSS? Porque nessa lista eu tenho um cabeçário e ao clicar no cabeçário é ordenado conforme ordem alfabetica porém bagunça tudo as cores... Se for em css não bagunça. Commented 29/05/2017 às 18:16
  • Fiz um "ajuste técnico" no seu código e deu certo, rsrsrs. Obrigado!!! Commented 30/05/2017 às 17:06

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 .