Jak mogę powiedzieć CSS: not () selector, aby wpływał na wszystkie węzły potomne?

Question

Zobacz ten minimalny przykład

.global :not(.guard) {
  color: red;
}

<div class="global">
  <p>I'm outside guard</p>

  <div class="guard">
    I'm inside guard.

    <div>
      <hr>

      <p>
        I'm a block inside guard.

      </p>

      <p>
        I want to black color too.
      </p>

      <p>
        How can I achieve it?
      </p>
    </div>
  </div>
</div>

Mam taki styl (SCSS)

.global {
  :not(.guard) {
    color: red;
  }
}

Chcę, aby nic wewnątrz węzła z .guardkolorem nazwy klasy nie miało wpływucolor: red;

Jak mogę osiągnąć ten efekt?

Answer 1

Jeśli dobrze zrozumiałem efekt, który próbujesz osiągnąć, możesz zaimplementować go za pomocą następujących dwóch selektorów:

.global {
  color: red;
}

.global .guard {
  color: black;
}

W tym przypadku naprawdę nie potrzebujesz :not()pseudo-selektora.

---

Przykład roboczy:

.global {
  color: red;
}

.global .guard {
  color: black;
}

<div class="global">
  <p>I'm outside guard</p>

  <div class="guard">
    I'm inside guard.

    <div>
      <hr>

      <p>
        I'm a block inside guard.

      </p>

      <p>
        I want to black color too.
      </p>

      <p>
        How can I achieve it?
      </p>
    </div>
  </div>
</div>