Mike McCaffreyJul 23, 2025

I had absolutely no idea that the :has() and :not() pseudo selectors in #CSS take on the specificity of whatever selector you pass into them, which is batshit crazy.

I've never encountered issues, because 99% of the time I'm just passing a single class into :not(), but if you do something like this, it is nearly impossible to override:

.something:not(#thisonething)

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity#the_is_not_has_and_css_nesting_exceptions

Specificity - CSS | MDN

Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.

MDN Web Docs
Show threadCurtis Wilcox

@mikemccaffrey
What if you add :where() to it?

.something:not(:where(#thisonething))

Jul 23, 2025 at 4:29pmWeb
Show threadMike McCaffreyJul 25, 2025
@cwilcox808 My coworkers argue that isn't clear for some reason. I can't say I really understand their concerns.
Show threadCurtis WilcoxJul 25, 2025

@mikemccaffrey
In general, I can understand people having difficulty reading pseudo-classes within pseudo-classes.

For :where() in particular, since it typically contains a list of selectors, seeing it with only one may be puzzling, it being a specificity "eraser" an afterthought.