Problems in the nth-child (n) CSS3 Pseudo-Class

Navigation
0

I'm trying to do in CSS3 with nth-child () the famous "color yes, no color "in a list made in Foundation 5. It happens that in the middle of the list there will be a div in which it will be a modal and this modal div ends up messing up the" color yes, no color "effect making the column turn gray instead of the line. 

#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>
    
asked by anonymous 26.05.2017 / 18:37

1 answer

1
  • Your problem is not the modal div, whereas in CSS you have the class .row. CSS is doing exactly what you want, coloring an entire column of gray and another whole column of white. To resolve otherwise, do the following:
    • Make a default class in the CSS for coloring.
    • Put a default class next to the "row" for each list you want to color. By doing this, you do not mix the other "row" pages.
    • Use a jQuery to do a coloring logic, for example: 

//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><linkrel="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>
    
26.05.2017 / 19:56
How to perform line breaking of a String inside a cell in Excel with VB.NET? User and password validation in C