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

Css specified value “sectionlevel”

carnoxen
2020-12-31

It is its level number in section. For example,

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

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%);
}
vrugtehagel
2021-03-17

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.