specificity pseudo especificidad clases child html css css3 css-selectors css-specificity

html - pseudo - important css



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

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>


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>


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.