Hello! We need help in vertex flex-blocks so that all elements + 1 starting from the second have the same styles. That is, I have, for example, 15 blocks, I need the first block to be white, the second and third gray, the fourth and fifth white, the sixth and seventh gray again, and so on, so that the styles alternate 2 elements each. I can not understand how to achieve this with the help of css. I feel that I need to use nth-child, but I don’t understand what rule

    2 answers 2

    You can do this for example:

    *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; outline: 0; } /*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/ .child { width: 50px; height: 50px; border: 2px solid #000; } .child:nth-child(4n+2), .child:nth-child(4n+3) { background: gray; } 
     <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> <div class="child">10</div> <div class="child">11</div> <div class="child">12</div> <div class="child">13</div> <div class="child">14</div> <div class="child">15</div>

      I will add the previous answer:

      writing %class%:nth-child(xn+y) , where x and y are the step and the initial shift (integers), means that the style will apply to all elements with class %class% that are their boyfriend's xth child starting with the yth. Ie, if you have .my_class:nth-child(4n+3) , it means "every 4th child with class my_class, starting with child 3".