A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

Css specified value “sectionlevel”


It is its level number in section. For example,

<h1 id="first">this is top</h1>
<h1 id="second">this is section</h1>
<h1 id="third">this is section</h1>

first, second, third-id element has level 1, 2, 3.

It can be useful for sizing heading fonts like this:

:heading {
    font-size: calc(2em * (sectionlevel - 1) * 75%);

Well, for the specific example you provided, you should probably use h2 and h3. Also, I’m a little worried people are going to use sections in inappropriate places for this side effect.