Problems in Pseudo Class Nth-Child(n) CSS3

Question

I’m trying to do in CSS3 with Nth-Child() the famous "color yes, color no" in a list made in Foundation 5. It happens that in the middle of the list there will be a div in which will be a modal and this modal div ends up messing up the effect "color yes, color no" 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>

Answer 1

• Your problem is not the modal div, since in CSS you set the .row. CSS is doing exactly what you say, coloring an entire column of gray and another entire column of white. To resolve otherwise, do the following:
  • Make a default CSS class for coloring.
  • Put a default class along with the "Row" for each list you want to color. By doing this, you don’t mix the other "Row" of the page.
  • Use a jQuery to make 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>
<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>