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

Question

Я пытаюсь стилизовать все элементы внутри класса, исключая указанный c один, и это дети. Я сделал несколько попыток, используя селектор : not () , но я не смог добиться того, чего хочу. Есть мысли?

 <div class="orange">
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>

  <div class="list">
    <ul>
      <li> li text 1</li>
      <li> li text 2 </li>
    </ul>
  </div>

</div>

Вот ссылка с html и стилями. https://stackblitz.com/edit/js-p7krtp?file=style.scss

Answer 1

Используйте ">" дочерний комбинатор :

.orange {
  > :not(.list){
    color: orange
  }
}

. Выбирает всех дочерних элементов .orange, которые не имеют класса .list.