Стилизация детей в CSS

213

18 октября 2018, 20:20

Здравтсвуйте. Нужна помощь в вертске flex-блоки таким образом, чтобы все элементы + 1 начиная со второго имели одинаковые стили. То есть у меня есть, например, 15 блоков, нужно чтобы первый блок был белый, второй и третий серый, четвертый и пятый белый, шестой и седьмой снова серый и так далее, что бы стили чередовались по 2 элемента. Не могу понять как этого добиться с помощью css. Чувтсвую, что нужно использовать nth-child, но какое правило не понимаю

Answer 1

Сделать это можно к примеру так:

*, 
*: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>

Answer 2

Дополню предыдущий ответ:

написание %class%:nth-child(xn+y), где x и y - шаг и начальный сдвиг (целые числа), означает, что стиль применится ко всем элементам с классом %class%, которые являются x-ым чайлдом своего парента, начиная с y-го. Т.е, если у вас задано .my_class:nth-child(4n+3), то это означает "каждый 4-й чайлд c классом my_class, начиная с чайлда № 3".