:nth-* pseudo-classes interoperability

[nt1m]

Description

1. Make sure the root element matches :nth-child/:nth-last-child/:nth-of-type/:nth-last-of-type accordingly (Blink/Gecko do this properly, WebKit does not)
2. Support for of <selector-list> syntax for :nth-child/:nth-last-child (WebKit supports this)

Rationale

Interoperability issues for something that is very basic and commonly used by web developers.

Specification

https://w3c.github.io/csswg-drafts/selectors-4/#child-index

Tests

Tests for item 1:
css/selectors/child-indexed-no-parent.html
css/selectors/child-indexed-pseudo-class.html
css/selectors/selector-structural-pseudo-root.html

Tests for item 2:

css/selectors/nth-child-and-nth-last-child.html
css/selectors/nth-child-of-classname.html
css/selectors/nth-child-of-complex-selector.html
css/selectors/nth-child-of-compound-selector.html
css/selectors/nth-child-of-tagname.html
css/selectors/nth-child-specificity-1.html
css/selectors/nth-child-specificity-2.html
css/selectors/nth-child-specificity-3.html
css/selectors/nth-child-specificity-4.html
css/selectors/nth-last-child-of-classname.html
css/selectors/nth-last-child-of-complex-selector.html
css/selectors/nth-last-child-of-compound-selector.html
css/selectors/nth-last-child-of-style-sharing-1.html
css/selectors/nth-last-child-of-style-sharing-2.html
css/selectors/nth-last-child-of-tagname.html
css/selectors/nth-last-child-specificity-1.html
css/selectors/nth-last-child-specificity-2.html
css/selectors/nth-last-child-specificity-3.html
css/selectors/nth-last-child-specificity-4.html

Some WebKit layout tests I haven't got around to porting, that might be worth adding:

LayoutTests/fast/css/nth-last-child-of-style-update-optimization.html
LayoutTests/fast/selectors/nth-last-child-of-cannot-match-during-parsing-1.html
LayoutTests/fast/selectors/nth-last-child-of-cannot-match-during-parsing-2.html
LayoutTests/fast/selectors/nth-last-child-of-class-style-update.html
LayoutTests/fast/css/parsing-css-nth-child-of-1.html
LayoutTests/fast/css/parsing-css-nth-child-of-2.html
LayoutTests/fast/css/parsing-css-nth-child-of-3.html
LayoutTests/fast/css/parsing-css-nth-child-of-4.html
LayoutTests/fast/css/parsing-css-nth-child.html
LayoutTests/fast/css/parsing-css-nth-last-child-of-1.html
LayoutTests/fast/css/parsing-css-nth-last-child-of-2.html
LayoutTests/fast/css/parsing-css-nth-last-child-of-3.html
LayoutTests/fast/css/parsing-css-nth-last-child-of-4.html

[yisibl]

Yes, the of <selector-list> (An+B [of S]?) syntax is very useful and there is no other way to emulate (hack) this selector.

[stubbornella]

I've had developer requests for this API. Glad we are considering it.

[emilio]

I'm a bit concerned about the performance characteristics of the :nth-child(.. of <selector>) syntax, fwiw. Agreed they're useful in principle tho... I'm curious about @lilles' opinion on that regard if he has the time.

[lilles]

My immediate reaction was that we should be able to have a map from selector to index in our NthIndexCache like we have a map for element type to index today. I think our invalidation code could invalidate based on invalidation sets for selectors inside :nth-child(.. of <selector>) like we do for any other selector.

[lilles]

Of course, even with the cache, doing the linear matching of N siblings can still get crazy expensive if the selector inside the :nth() involves descendants, indirect siblings and :has().

[nt1m]

WebKit has a CSSJIT implementation for :nth-child(.. of selector)

[emilio]

That doesn't save you from exponential time tho, it only makes matching each sibling faster, right?

[nt1m]

CSSJIT is mostly for selector matching, yes.

[foolip]

There were 3 mentions of nth-* in State of CSS 2022, which was not enough to make the top list in #248. Here they are:

• nth-of-class
• https://caniuse.com/css-nth-child-of I've wanted to use this a few times but it only works in Safari
• ::nth-child

[foolip]

In the MDN short survey on CSS & HTML, "CSS :nth-child() pseudo-class with selector-list argument" was selected by ~23% of survey takers, putting it in the top third of the 20 options. (There is some uncertainty as with any survey data.)

[foolip]

Thank you for proposing :nth-* pseudo-classes for gradients for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as part of the CSS Pseudo-classes focus area. You can follow the progress of this Focus Area on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.