複数のhtmlにまたがってcssのcounterを続けて加算できますか？

Question

前提・実現したいこと

複数のhtmlにまたがって、cssのcounterを続けて加算することは可能でしょうか？
試したものの、htmlが変わるとカウンターはリセットされてしまいます。

cssにあまり詳しくないので、そもそも仕様から外れているかもしれませんが、
ご存じの方いらっしゃいましたらよろしくお願いいたします。

該当のソースコード

h1 {
  counter-increment: chapter;
}
h1::before {
  content: counter(chapter) ". ";
}

test1.html

<h1>タイトル</h1>

test2.html

<h1>タイトル</h1>

こうした場合に、
test1.html で 1. タイトル
test2.html で 2. タイトル
と、カウンターが続けて加算されていく事を期待しています。

試したこと

グローバル変数なども試してみましたが、うまく動きませんでした。

:root {
  --chapter: 1;
}
h1 {
  counter-increment: var(--chapter);
}

Answer 1

CSSカウンターはあくまで同一文書内においての要素をカウントをしていくものなので、画面をまたいで維持できるものではないと思います。

手動で追加するしかないのではないでしょうか。

それか、jsonファイルなどでデータを持っておいて、URLやファイル名にリンクした情報を取ってくるようにするとか（JavaScriptまたはPHPなどサーバーサイドの言語）

Comments

[pack928]

早速ご回答頂きましてありがとうございます！動作を見ていて同一文書内なのかなと想像していましたが、やっぱりそうなのですね・・・ページを見る順番も絡んできますし、おっしゃる通りファイル名など照合する必要もありそうですね。参考にさせていただきます、ありがとうございました！

Answer 2

CSSだけではむずかしいです。

JavaScriptでCookieやWeb Storage APIを操作するか、リンク先へ遷移する際にクエリストリングを仕込んでおくか、サーバ側にセッションなどのデータとして保存しておく必要があるとおもいます。

Comments

[pack928]

早速ご回答いただいてありがとうございます！やっぱりCSSだけでは難しいのですね・・・
頂いた方法などを参考にして、別の手段を検討してみます。有難うございました！

[imojaga]

用途によりますが、永続性や確実性が必要ないならWeb Storage APIでじゅうぶんだとおもいます