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.
Tipos de selector
La siguiente lista de tipos de selector está aumentando la especificidad:
- Selectores de tipo (p. Ej.,
h1
) y pseudo-elementos (p. Ej.,:before
).- Selectores de clase (por ejemplo,
.example
), selectores de atributos (por ejemplo,[type="radio"]
) y pseudo-clases (por ejemplo.example
:hover
).- 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.