:heading() CSS pseudo-class: Level ranges

[js-choi]

As per #3499 (comment), I’d like to propose an enhancement for #3499 such that its :heading(n) CSS pseudo-class accepts range expressions :heading(> n), :heading(< n), :heading(>= n), :heading(<= n), and perhaps simple conjunctions such as :heading(> m, < n). See also #83 and w3c/csswg-drafts#1008.

[Crissov]

Wouldnʼt the established An±B microsyntax make more sense to use?

• :heading(n < 3) = :heading(-n+3)
• :heading(n > 3) = :heading(n-3)
• n ∈ {1, 2, 3, 4, 5, 6} for HTML

[annevk]

That's quite neat and would address @emilio's concern (if used properly). Perhaps not the most intuitive syntax, but copy-and-paste works.

[tabatkins]

An+B is great for selecting the Nth element, or every Nth element. It can be used to select every element before/after a certain N, but it's not very intuitive. I'd much rather use comparison operators like MQs allow.

(I don't think the 2n use-case is needed in headings, so the loss of functionality doesn't seem significant.)

[AmeliaBR]

As I commented in the related CSS issue discussion, there is open discussion (w3c/csswg-drafts#4140) about adding an intuitive range syntax to the CSS nth-child selectors. If both that and this proposal are adopted, then it would make sense to harmonize the syntax. There might not be much use case for :heading(odd) selector, but it would be simpler for authors and implementers if the bits inside the :heading(numeric selector) and :nth-child(numeric selector) are parsed the same.

[tabatkins]

Yeah, if An+B grows range restrictions, might as well do the full syntax over here too. Better that than special-casing things.

[annevk]

How likely is that to happen? If that's likely I'd be happy to start with An+B and update once we get there.

[annevk]

Closing this given that #7829 happened.

If w3c/csswg-drafts#1008 turns into something we can revisit.