Tenho a seguinte estrutura:
.pai{
width: 300px;
display: flex;
flex-wrap: wrap;
}
.filho{
width: 80%;
margin-top: -1px;
border: 1px solid black;
}
.ordem1{order:1}
.ordem2{order:2}
.ordem3{order:3}
.ordem4{order:4}
.ordem5{order:5}
.filho:nth-child(odd) {background: #e0e0e0;}
<div class="pai">
<div class="filho ordem5">Zebra5 (cinza)</div>
<div class="filho ordem3">Zebra3 (cinza)</div>
<div class="filho ordem4">Zebra4 (branca)</div>
<div class="filho ordem2">Zebra2 (branca)</div>
<div class="filho ordem1">Zebra1 (cinza)</div>
</div>
Porém gostaria que as divs ficassem zebradas de acordo com a propriedade order
do css, na mesma sequencia.
Alguma sugestão ?
ordem
sem ter que usar oorder
do flex. Veja um exemplo: jsfiddle.net/g95f712u – Sam 19/06/19 às 18:36