{color: red}.Надо чтобы было так:
Код такой:
.parrent {
display: flex;
justify-content: space-evenly;
margin-bottom: 1em;
}
.child {
width: 100px;
height: 100px;
border: 2px solid;
background-color: blue;
}
<div class="parrent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="separator"></div>
<div class="parrent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
ps: .parrent ~ .parrent .child:nth-child(3) - очевидно, можно не писать...
.parrent {
display: flex;
justify-content: space-evenly;
margin-bottom: 1em;
}
.child {
width: 100px;
height: 100px;
border: 2px solid;
background-color: blue;
}
.parrent:nth-child(4n+1) > .child:nth-child(1),
.parrent:nth-child(4n+1) > .child:nth-child(2),
.parrent:nth-child(4n+3) > .child:nth-child(3) {
background-color: red;
}
<div class="parrent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="separator"></div>
<div class="parrent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="separator"></div>
<div class="parrent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="separator"></div>
<div class="parrent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости