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.
#mainBtn id has greater weight than .cta class. That means class weight is discarded and id weight is counted here. Is that right ?
The comma is used to separate rules and combine them without having to write them twice.
button:not(#mainBtn, .cta) is equivalent to this:
button:not(#mainBtn){...
button:not(.cta){...
It applies to either the id or the class, an element targeted by this rule doesn't need to have both the class and the id. Therefore, the specificity is 1-0-1.
