2019年06月1日(土)

自動ナンバリングできるCSSカウンターを同ページ内で複数使うサンプル

• 0
• 0
• 7
• 24

Result

See the Pen Overlapping CSS Counters by kachibito
(@kachibito) on CodePen.

自動連番できるCSSカウンターを親要素と子要素の入れ子で2つ使う、みたいなやつ
異なるコンテナに含まれる同一要素に自動でナンバリングします

結論から言うと、複数のカウンター名を使えるのでそのまま使えば動作します

css

body {/*sectionsとboxesの2つのカウンター名を設定して初期化*/ counter-reset: sections boxes; } /*親要素のカウンター*/ section { counter-increment: sections; } section::before {/*数字に接頭語を付与*/ content: 'その' counter(sections); } /*子要素のカウンター*/ .box { counter-increment: boxes; } .box::before { content: counter(boxes, decimal-leading-zero); } ...