Divs with zebra colors and property order

Asked

Viewed 97 times

0

I have the following structure:

.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>

But I would like the Ivs to be zebrad according to the property order css in the same sequence. Any suggestions ?

css

  • Do you want them to be alternating between gray and white? In case, wouldn’t it be better to put the color within the order class? Or already receive ordered?

  • Yes, zebras between gray and white obeying the css order property.

  • I already get paid

  • With Javascript you can sort the Divs by class ordem without having to use the order flex. See an example: https://jsfiddle.net/g95f712u/

1 answer

1


There is a way to do it, the only caveat is that you know the height of the child. Having a fixed value for the child you can build a background in the father. The idea is not to use bg in the son where the order may vary, but rather in the father who will grow up in a controlled way since you know the height of the son.

Note that even deleting a child in the middle, even so the order of the stripes follows coherent. It "adapts" to the child independent of the order...

inserir a descrição da imagem aqui

What we have here is a father with a repeat-liner-gradient, where each color band te the height of the child, in case 30px + borda. So no matter the order or how many children you have the striped gradient at the bottom always come to fit the children.

Follows the code

.pai{
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  background-image: repeating-linear-gradient(to bottom, #ccc 0px, #ccc 31px, #fff 31px, #fff 62px);
  background-size: 80% 100%;
  background-repeat-x: no-repeat;
}
  
.filho{
  width: 80%;
  margin-top: -1px;
  border: 1px solid black;
  line-height: 30px;
  box-sizing: border-box;
}

.ordem1{order:1}
.ordem2{order:2}
.ordem3{order:3}
.ordem4{order:4}
.ordem5{order:5}
<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>

  • 1

    Thank you! It works like a charm.

  • @Pedroaugusto some would call it gambiarra, I prefer to call technological resource

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.