display: none;した要素でのCSSカウンター

あまりCSSカウンターを使ったことがなかったので知らなかったんですが、display: none;した要素ではインクリメントやリセットされないという仕様があったんですね。いっぱいあるセクションにCSSカウンターで番号を振って、特定のものだけ表示しようとして引っかかりました。

Demo: display: none; and counter-increment

デモではそれぞれのセクションにp要素が8つあり、それに

section {
  counter-reset: test;
}

p::before {
  counter-increment: test;
  content: "Count " counter(test) ": ";
}

として頭に数字を追加するようにCSSを書きました。2つ目のセクションでは更に2番目から7番目のp要素をdisplay: none;で非表示にしています。どのブラウザでも仕様通り2つ目のセクションでは8番目のp要素の数字が2になっていますね。CSS3でもこの仕様に変更は無いようです。

やろうとしていたことではとりあえず見えなければ良いというだけだったので、

.foo {
  position: absolute;
  bottom: 1000%;
}

という形で隠すことでごまかしました。

前に全部ちゃんと読んだのはもう5年以上前だと思うので、そろそろ仕様書を再び読み直す必要がありますね。CSS 2.1仕様書読書会とかあったら参加したいような気がします。気がするだけですけどね。