Стилизация дочерних элементов в зависимости от родителя

Question

Допустим, у нас есть такая HTML структура:

<div class="parent1">
    <div class="child"></div>
</div>
<div class="parent2">
    <div class="child"></div>
</div>

Могу ли я задать разные стили child в зависимости от родителя? Допустим задать первому child красный цвет, а второму зеленый?

Answer 1

.child {
  height: 30px;
  margin-bottom: 1rem;
  background-color: var(--child-bg, yellow);
}

.parent1 {
  --child-bg: red;
}

.parent2 {
  --child-bg: green;
}

<div class="parent1">
  <div class="child"></div>
</div>
<div class="parent2">
  <div class="child"></div>
</div>
<div class="parent3">
  <div class="child"></div>
</div>

БЛОГ НА HUSL

Стилизация дочерних элементов в зависимости от родителя

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