854148 - (nth-child-of) Support for nth-child(An+B of sel) , nth-last-child(An+B of sel) pseudo classes

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Robert Utasi [:hunboy]]

Attachment: testcase simplified (doesn't contain an+b variants)

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:19.0) Gecko/20100101 Firefox/19.0
Build ID: 20130307023931

Steps to reproduce:






Expected results:

Based on discussion at Bug 854125
and following w3c selectors level 4 draft
http://dev.w3.org/csswg/selectors4/#the-nth-match-pseudo

implement nth-match, nth-last-match pseudo classes

Comment 1

[Robert Utasi [:hunboy]]

The sel4draft has been changed, nth-match, nth-last-match was removed and feature merged to nth-child with this syntax: nth-child(An+B of sel) where sel is a list of selectors

http://dev.w3.org/csswg/selectors4/#the-nth-child-pseudo

"By passing a selector argument, we can select the Nth element that matches that selector. For example, the following selector matches the first three “important” list items, denoted by the .important class:

li:nth-child(-n+3 of .important)

Note that this is different from moving the selector outside of the function, like:

li.important:nth-child(-n+3)

This selector instead just selects the first three list items if they also have the .important class."

Comment 2

[Robert Utasi [:hunboy]]

Attachment: testcase simplified (doesn't contain an+b variants)

upgrading testcase based on changes

Comment 3

[yisibl]

WebKit support: 

https://bugs.webkit.org/show_bug.cgi?id=136845
https://bugs.webkit.org/show_bug.cgi?id=137593

Comment 5

[Binyamin]

Additional testcase https://output.jsbin.com/meliga/quiet

Comment 6

[jdscharett]

Any timeframe at when this might be implemented?

Comment 7

[Jamie Katz]

This got a big mention on css-tricks: https://css-tricks.com/

Comment 8

[Jamie Katz]

https://css-tricks.com/css-nth-of-class-selector/

Comment 9

[amir123456789893]

That's quite a missed feature. nth-child() and nth-of-type() run the 50% of the way but this syntax improvement can be used as the next level of nth selectors!

Comment 10

[Sander]

Bramus Van Damme mentioned the "x of y" part at CSS Day 2022. Would be great to see that supported in more browsers!

Comment 11

[Zach Hoffman [:zrhoffman]]

Attachment: Bug 854148 - Implement parsing / selector-matching for :nth-child(An+B of selector list) and :nth-last-child(An+B of selector list) r?#style

A lot of the work already done for :is() and :where() can be reused, so
the most significant change is a hashmap of caches for each of
:nth-child(An+B of S) and :nth-last-child(An+B of S).

Depends on D165778

Comment 12

[Zach Hoffman [:zrhoffman]]

Attachment: Bug 854148 - Reuse list_matches_complex_selector() where possible r?#style

Drive-by simplification now that the function exists.

Depends on D165779

Comment 13

[Phabricator Automation]

Comment on attachment 9310337 [details]
Bug 854148 - Reuse list_matches_complex_selector() where possible r?#style

Revision D165780 was moved to bug 1808228. Setting attachment 9310337 [details] to obsolete.

Comment 14

[Zach Hoffman [:zrhoffman]]

Moving dev-doc-needed to bug 1808229, since, although support for support for :nth-child(An+B of selector list) and :nth-last-child(An+B of selector list) is shipping, bug 854148 still depends on :nth-child(An+B of :has()) and :nth-last-child(An+B of :has(...)) invalidation (bug 1818155).

Comment 15

[Zach Hoffman [:zrhoffman]]

Shipping since Firefox 113 (landed in bug 1808229 comment 3, intent sent in https://groups.google.com/a/mozilla.org/g/dev-platform/c/eQeeFKYJ038/m/EfFYIA87AAAJ)! Now that :nth-child(An+B of :has()) invalidation is complete (in bug 1792501, thanks David!), let's close the [meta].