[css-nesting-1] [selectors-4] Figure out the specificity of nesting with pseudos and non-pseudos

[emilio]

In #9702, we're defining that something like this works and selects the pseudo-element:

.foo, ::before, ::after {
  &:hover { color: red }
}

However, it's not currently defined what the specificity of a pseudo-element is.

This is usually not observable, but will become observable now, so we also need to define that.

See #9600 for a similar bug where we defined that those are zero

[emilio]

cc @mirisuzanne @tabatkins

[SebastianZ]

However, it's not currently defined what the specificity of a pseudo-element is.

https://drafts.csswg.org/selectors-4/#specificity says this:

A selector’s specificity is calculated for a given element as follows:

• count the number of ID selectors in the selector (= A)
• count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
• count the number of type selectors and pseudo-elements in the selector (= C)
• ignore the universal selector

Sebastian

[mirisuzanne]

Yeah, I think technically this is already defined. It's just never mattered before now, since pseudo element selectors are always/only present in selectors that only match pseudo-elements.

I don't think this is likely to come up often (pseudo subjects & non-pseudo subjects in the same selector), and authors should have the option to remove the pseudo-selector specificity using :where(), so I expect the best path forward is consistency: pseudo-element selectors continue to have the same specificity as other element type selectors.

[emilio]

@SebastianZ yeah, I guess the main question is: This has never mattered before, is that what we want?

There are also pseudo selectors (view-transition-classes etc) which add their own specificity on top.

authors should have the option to remove the pseudo-selector specificity using :where()

Note that we resolved on the other issue that :is() / :where() would keep not working, this was a nesting-specific change. So I don't think that works...

[Psychpsyo]

There are also pseudo selectors (view-transition-classes etc) which add their own specificity on top.

They add their own specificity rules, but those only ever set the specificity outright, instead of adding to what was there before. Those pseudos either have the specificity of a type selector, or 0. Never the base specificity + something else.
See https://www.w3.org/TR/css-view-transitions-1/#named-view-transition-pseudo and https://www.w3.org/TR/css-view-transitions-2/#pseudo-element-class-additions

[emilio]

Again, that difference is not observable r/n, and I'm not convinced ::view-transition-group(*) should be less specific than e.g. ::before

[tabatkins]

Yeah, I'm inclined to say that pseudo-element selectors are, by default, 0 specificity. Specific ones can define otherwise, like the VT pseudos.