Принудительно указывать цвет текста дочерних элементов, если указан класс c

Question

Мне нужно переопределить цвет детей, когда его родитель имеет определенный c класс.

.parent {
  width: 100%;
}

.parent>.child {
  color: black;
}

.parent>.child.blue {
  color: blue;
}

.parent.error {
  color: red !important;
}

.parent.error>.child {
  color: red !important;
}

<div class="parent">
  <div class="child">Child #1</div>
  <div class="child blue">Child #2</div>
</div>

Когда родительский класс добавляется с «ошибкой» с использованием jquery $('.parent').addClass('error'), только Child # 1 цвет меняется на красный , Child # 2 (в его классе есть blue ) <div class="child blue">Child #2</div> остается синим.

Вопрос в том, как заставить Child # 2 чтобы изменить его цвет на красный без указания .parent.error > .child.blue для класса ошибки.

/*If this style is added, it will work*/
.parent.error > .child.blue {
    color: red !important;
}

Спасибо ...

Answer 1

без более глубокого мозгового штурма, моя первая реакция: CSS basi c принцип гласит: чем ближе определение, тем больше у него приоритета.

Таким образом, часть !important необходима чтобы заставить вещи работать.

В качестве альтернативы вы можете переосмыслить определения CSS противоположными. «.Blue» вступает в силу только тогда, когда класс родителя не содержит .error.

Ускоренная подсказка - что-то вроде этого для безошибочного случая :

.parent:not(.error) > .child.blue {
color: blue; 
}