I have read on css tricks that :not should not add additional specificity. But it looks like it does?
https://css-tricks.com/almanac/selectors/n/not/
The specificity of the :not pseudo class is the specificity of its argument. The :not() pseudo class does not add to the selector specificity, unlike other pseudo-classes.
Or am I missing something?
.red:not(.blue) {
background: blue;
}
.red {
height: 100px;
width: 100px;
background: red;
}
<div class="red">
</div>
Yes, it adds the specificity of its argument. Look at the first sentence:
The specificity of the :not pseudo class is the specificity of its argument. The :not() pseudo class does not add to the selector specificity, unlike other pseudo-classes.
So the specificity of .red:not(.blue)
is equal to that of .red.blue
— 2 class selectors, or (0, 2, 0), making it more specific than .red
on its own. What the second sentence means is that the :not()
itself does not contribute the additional specificity of a pseudo-class to make it (0, 3, 0), like the :hover
in .red.blue:hover
does for example.