8 replies

Target logical heading level with CSS?

In the following HTML,

<body>
  <h1>heading 1</h1>
  <section>
    <h1>heading 2</h1>
    <aside>
      <h2>heading 3</h2>
    </aside>
  </section>
</body>

<body>
  <h1>heading 1</h1>
  <section>
    <h1>heading 2</h1>
    <aside>
      <h2>heading 3</h2>
    </aside>
  </section>
</body>

<body>
  <h1>heading 1</h1>
  <section>
    <h1>heading 2</h1>
    <aside>
      <h2>heading 3</h2>
    </aside>
  </section>
</body>

<body>
  <h1>heading 1</h1>
  <section>
    <h1>heading 2</h1>
    <aside>
      <h2>heading 3</h2>
    </aside>
  </section>
</body>

…

heading 1

heading 1

heading 1

heading 1 has a "resolved" heading depth of 1, and

heading 3

heading 3

heading 3

heading 3 of 4. However, the latter is not styled using the

h4

h4

h4

h4 selector, and still responds to the

h1

h1

h1

h1 selector.

Is there a way to target headings by their logical level rather than their tag name?