[selectors][css-content] :level(an+b) Pseudo Class

[Crissov]

The generation of bookmark levels has been discussed e.g. in #204 and in November 2015 on www-style. @frivoal had shown that it’s nearly impossible to recreate the HTML5 outline algorithm with existing Selectors, so bookmark-level: auto would make some sense. That value hasn’t been added to the drafts, though, and I would like to propose a different solution, a new structural pseudo-class.

Nesting, stacking or hierarchy levels are of interest for styling in several cases, e.g. headings or sections and lists in document markup languages or layers and sprites in images. So let there be an abstract level that depends on the host language and may differ among its element types. Since a pseudo class increases specifity, the following rulesets should sufficiently describe the usually desired behavior for HTML:

* { bookmark-level: none; }
h1 { bookmark-level: 1; }
h2 { bookmark-level: 2; }
h3 { bookmark-level: 3; }
h4 { bookmark-level: 4; }
h5 { bookmark-level: 5; }
h6 { bookmark-level: 6; }
h1:level(0), h2:level(0), h3:level(0), h4:level(0), h5:level(0), h6:level(0)
  { bookmark-level: none; }
h2:level(1), h3:level(1), h4:level(1), h5:level(1), h6:level(1)
  { bookmark-level: 1; }
h1:level(2), h3:level(2), h4:level(2), h5:level(2), h6:level(2)
  { bookmark-level: 2; }
h1:level(3), h2:level(3), h4:level(3), h5:level(3), h6:level(3)
  { bookmark-level: 3; }
h1:level(4), h2:level(4), h3:level(4), h5:level(4), h6:level(4)
  { bookmark-level: 4; }
h1:level(5), h2:level(5), h3:level(5), h4:level(5), h6:level(5)
  { bookmark-level: 5; }
h1:level(6), h2:level(6), h3:level(6), h4:level(6), h5:level(6)
  { bookmark-level: 6; }

The syntax inside parentheses would probably follow the existing an+b syntax, but I‘m not sure we’d need to differentiate :first-level, :last-level and :nth-level(), but it would be consistent.

Likewise, one could easily ensure the same marker style for items in nested lists, no matter if the structure mixes ol, ul and dl.

ul>li:level(2) { list-style-type: disc; }

PS: Since this is a more generic pseudo class than rather semantic :heading-level() (which I think I had proposed unsuccessfully several years ago), the following would not be sufficient for HTML:

:level(1) { bookmark-level: 1; }
:level(2) { bookmark-level: 2; }
:level(3) { bookmark-level: 3; }
:level(4) { bookmark-level: 4; }
:level(5) { bookmark-level: 5; }
:level(6) { bookmark-level: 6; }

[frivoal]

I am not sure I understand how that's supposed to work. Can you give some examples of markup, and which level would match? The syntax seems easy enough, but are the semantics something we can agree on unambiguously?

[tabatkins]

@frivoal Yeah, the semantics are well-defined by the HTML outline algorithm. Sections are introduced either by the section elements, or implicitly by headings.

[frivoal]

@tabatkins that same outline algorithm which nobody implements, that is scheduled to be removed from the W3C HTML spec, and has a couple of subtle phrasing differences between the WHATWG and W3C version? :) Jokes aside, it just defines the structure, but not which level is 0 or 1, and it doesn't define what the levels of nested lists are. So I'd like to see an explicit mapping between that and the proposed syntax here.

Most likely I expect this to make sense and to agree, but I'd rather agree with the actual proposal than which what I guess it might mean.

[tabatkins]

W3C HTML is an irrelevant garbage fire, so we can ignore what's going on there. We can define whether the "top level" is 0 or 1 for the purpose of this pseudo-class (CSS uses 1-based numbering, so the clear answer is 1 for the top level).

Yeah, the discussion of lists is a non-sequitur here. There's a well-defined HTML "level" concept based on sections/headings, but no such concept exists for lists, or is planned to be added. Some theoretical language could have such a thing, but not HTML.

[Crissov]

Meanwhile, HTML’s outline algorithm has been changed whatwg/html#83 whatwg/html#3499 whatwg/html#6462 whatwg/html#7867 and (re)introducing <h> seems not off the table. whatwg/html#7390