What is the total specificity for this CSS Selector? button:not(#mainBtn, .cta)

Question

On MDN Web Docs website, they have mentioned that the total specificity for the selector button:not(#mainBtn, .cta) is as follows:

| Selector                    | Identifiers | Classes | Elements | Total specificity

| button:not(#mainBtn, .cta)  | 1           | 0       | 1        | 1-0-1

Here is the URL of the MDN Website: (https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance.

See the highlighted portion for the error:

I am expecting this:

| Selector                    | Identifiers     | Classes     | Elements      | Total specificity

| button:not(#mainBtn, .cta)  | 1(for #mainBtn) | 1(for .cta) | 1(for button) | 1-1-1

I am expecting this:

Can someone please let me know if I am right?

Answer 1

The MDN page you link to covers this, but not, IMO, in a particularly clear fashion. It says:

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.

The Selectors specification describes it more precisely:

The specificity of an :is(), :not(), or :has() pseudo-class is replaced by the specificity of the most specific complex selector in its selector list argument.

So, for :not(#mainBtn, .cta) we take the greater of the two selectors in the list:

#mainBtn = 1, 0, 0
.cta     = 0, 1, 0

So the greater of these is 1, 0, 0, and then we add the button specificity = 0, 0, 1

And the result is 1, 0, 1.

Answer 2

The specificity of an :is(), :not(), or :has() pseudo-class is replaced by the specificity of the most specific complex selector in its selector list argument.

https://www.figma.com/file/1ISVRXEq8noFWxAbBhgKzs/(work)?type=design&node-id=609%3A4867&mode=design&t=rNbIRILL60wQbLOY-1