Closed Bug 854148 (nth-child-of) Opened 11 years ago Closed 3 days ago

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


(Core :: CSS Parsing and Computation, enhancement)






(Reporter: hunboy, Assigned: zrhoffman)


(Blocks 4 open bugs)



(1 file, 3 obsolete files)

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

implement nth-match, nth-last-match pseudo classes
OS: Windows XP → All
Hardware: x86 → All
Attachment #728673 - Attachment mime type: text/plain → text/html
Component: General → Style System (CSS)
Blocks: selectors-4
Severity: normal → enhancement
Ever confirmed: true
Version: unspecified → Trunk
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

"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:


This selector instead just selects the first three list items if they also have the .important class."
Summary: Support for nth-match, nth-last-match pseudo classes → Support for nth-child(An+B of sel) , nth-last-child(An+B of sel) pseudo classes
upgrading testcase based on changes
Attachment #728673 - Attachment is obsolete: true
Additional testcase
Blocks: 1230801
Any timeframe at when this might be implemented?

This got a big mention on css-tricks:

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!

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

Severity: normal → S3
See Also: → 1776246
Blocks: 1795517
Depends on: 1808156

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

Assignee: nobody → zach

Drive-by simplification now that the function exists.

Depends on D165779

Depends on: 1808226
Depends on: 1808228
Depends on: 1808227
Depends on: 1808229
No longer depends on: 1808156

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.

Attachment #9310337 - Attachment is obsolete: true
Depends on: 1809754
Attachment #9310336 - Attachment is obsolete: true
Depends on: 1810657
No longer blocks: 1795517
Depends on: 1795517
Depends on: 1809470
Depends on: 1809659
Depends on: 1795513, 1809402
Blocks: interop-2023
No longer blocks: interop-2023
Alias: nth-child-of
Depends on: 1819711
Depends on: 1821258
No longer depends on: 1795513, 1809402, 1809470, 1809659

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).

Keywords: dev-doc-needed

Shipping since Firefox 113 (landed in bug 1808229 comment 3, intent sent in! Now that :nth-child(An+B of :has()) invalidation is complete (in bug 1792501, thanks David!), let's close the [meta].

Closed: 3 days ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.