Comment puis-je dire à CSS: not () selector d'affecter tous les nœuds enfants?

Question

Veuillez consulter cet exemple minimum

.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>

J'ai un style (SCSS) comme celui-ci

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

Je veux que tout ce qui se trouve à l'intérieur du nœud avec .guardla couleur du nom de la classe ne soit pas affecté parcolor: red;

Comment puis-je obtenir cet effet?

Answer 1

Si j'ai bien compris l'effet que vous essayez d'obtenir, vous pouvez l'implémenter avec les deux sélecteurs suivants:

.global {
  color: red;
}

.global .guard {
  color: black;
}

Dans ce cas, vous n'avez vraiment pas besoin du :not()pseudo-sélecteur du tout.

---

Exemple de travail:

.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>