Search code examples
htmlcsscss-selectorscss-specificity

Does the :not pseudo class increase the specificity of a selector?


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>


Solution

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