html - pseudo - important css

¿La clase: no pseudo aumenta la especificidad de un selector?

Question

He leído en css trucos que: no deberían agregar especificidad adicional. Pero parece que lo hace?

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

La especificidad de la: no pseudo clase es la especificidad de su argumento. La pseudo clase : not () no se agrega a la especificidad del selector, a diferencia de otras pseudo-clases.

¿O me estoy perdiendo algo?

.red:not(.blue) {
background: blue;
}
.red {
height: 100px;
width: 100px;
background: red;
}

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

Answer 1

El selector :not no tiene su propia especificidad, sin embargo, el selector interno :not() tiene.

De MDN

Tipos de selector

La siguiente lista de tipos de selector está aumentando la especificidad:

1. Selectores de tipo (p. Ej., h1 ) y pseudo-elementos (p. Ej., :before ).
2. Selectores de clase (por ejemplo, .example ), selectores de atributos (por ejemplo, [type="radio"] ) y pseudo-clases (por ejemplo .example :hover ).
3. Selectores de ID (por ejemplo, #example ).

El selector universal ( * ), los combinadores ( + , > , ~ , '' '' ) y la pseudo-clase de negación ( :not() ) no tienen efecto en la especificidad. (Los selectores declarados en el interior :not() sí, sin embargo).

Como está teniendo la regla .red:not(.blue) y el elemento <div class="red"> no tiene la clase blue , se aplica la regla.

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

Answer 2

Sí, añade la especificidad de su argumento. Mira la primera oración:

La especificidad de la: no pseudo clase es la especificidad de su argumento. La pseudo clase: not () no se agrega a la especificidad del selector, a diferencia de otras pseudo-clases.

Por lo tanto, la especificidad de .red:not(.blue) es igual a la de .red.blue - 2 selectores de clase, o (0, 2, 0), lo que la hace más específica que .red por sí sola. Lo que significa la segunda oración es que el :not() sí mismo no contribuye a la especificidad adicional de una pseudo-clase para hacerlo (0, 3, 0), como el :hover en .red.blue:hover , por ejemplo.