I am reading MDN docs here. They are explaining specificity in CSS. For button:not(#mainBtn, .cta), specificity is given as 1-0-1. Since, there is one class involved here, I think the specificity should be 1-1-1. According to their explanation, :not() doesn't add to specificity itself but its parameters or nested rules do. So, can anybody explain, why the specificity is 1-0-1 and not 1-1-1 here ?
Thanks
You have to read carefully: The negation (:not()), relational selector (:has()), the matches-any (:is()) pseudo-classes, and CSS nesting themselves don't add to specificity, but their parameters or nested rules do. The specificity weight that each contributes to the specificity algorithm is the specificity weight of the selector in the parameter or nested rule with the greatest weight.