Обращения к блоку по номеру

Question

столкнулся с проблемой , есть код -

html

.wrapper>.block {
  background-color: black;
  width:30px;
  height:30px;
}

.wrapper>.active:nth-child(1) {
  background-color: white;
}

.wrapper>.active:nth-child(2) {
  background-color: pink;
}

<div class="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block active"></div>
  <div class="block active"></div>
  <div class="block"></div>
</div>

по идеи 3 - 4 блок должны поменять цвета , но они не меняют , смена цветов сработает только если клас active переместить на первый блок .

Answer 1

.wrapper>.block {
  background-color: black;
  width:30px;
  height:30px;
}

.wrapper > .active {
  background-color: white;
}

.wrapper > .active ~ .active {
  background-color: pink;
}

БЛОГ НА HUSL

Обращения к блоку по номеру

Ответы (1 шт):