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>
:nth-child(number) { css declarations; }
.... você está passandodiv:nth-child(2n)
.. o que é esse"n"
?n
, mas é um tipo de multiplicador. Funciona parecido com:nth-child(odd)
e o:nth-child(even)