La pseudo classe: not augmente-t-elle la spécificité d'un sélecteur?

Question

J'ai lu sur le css astuces :ne doit pas ajouter d'autres spécificité. Mais on dirait qu'il fait?

https://css-tricks.com/almanac/selectors/n/not/

La spécificité de l' :pas de pseudo-classe est la spécificité de son argument. L' :non() pseudo-classe ne comprend pas ajouter le sélecteur de spécificité, contrairement à d'autres pseudo-classes.

Ou ai-je raté quelque chose?

.red:not(.blue) {
  background: blue;
}

.red {
  height: 100px;
  width: 100px;
  background: red;
}

<div class="red">
</div>

Answer 1

Oui, il ajoute la spécificité de son argument. Regardez la première phrase:

La spécificité de l' :pas de pseudo-classe est la spécificité de son argument. L' :non() pseudo-classe ne comprend pas ajouter le sélecteur de spécificité, contrairement à d'autres pseudo-classes.

Ainsi, la spécificité de l' .red:not(.blue) est égale à celle de l' .red.blue - 2 sélecteurs de classe, ou (0, 2, 0), le rendant plus spécifique que l' .red sur son propre. Ce que la deuxième phrase signifie, c'est que l' :not() lui-même n'a pas de contribuer supplémentaires à la spécificité d'un pseudo-classe pour le faire (0, 3, 0), comme l' :hover en .red.blue:hover t par exemple.

Answer 2

L' :not sélecteur de ne pas avoir son propre spécificité, cependant le sélecteur à l'intérieur d' :not() n'ont.

De MDN

Types De Sélecteur

La liste suivante des types de sélecteur est en augmentant la spécificité:

1. Les sélecteurs de Type (par exemple, h1) et les pseudo-éléments (par exemple, :before).
2. Des sélecteurs de classe (par exemple, .example), sélecteurs d'attributs (par exemple, [type="radio"]) et les pseudo-classes (par exemple, :hover).
3. Sélecteurs d'ID (par exemple, #example).

Sélecteur universel (*), combinators (+, >, ~, ' ') et la négation de la pseudo-classe (:not()) n'ont aucun effet sur la spécificité. (Les sélecteurs déclarée à l'intérieur d' :not() le faire, cependant.)

---

Comme vous allez avoir la primauté .red:not(.blue) et l'élément <div class="red"> n'ont pas la classe blue, la règle est appliquée.

.red:not(.blue) {
  background: blue;
}

.red {
  height: 100px;
  width: 100px;
  background: red;
}
div {
  background: green;
  width: 50px;
  height: 50px;
  margin: 10px;
}

<div></div>
<div class="red"></div>
<div class="blue"></div>