CSS - counter-reset

概要

属性名	counter-reset
値	[ <identifier> <integer>? ]+ \| none
初期値	none
適用可能要素	すべての要素
継承	継承しない
サポート	https://caniuse.com/mdn-css_properties_counter-reset_none

説明

content の counter(...) で挿入するカウンタをリセットします。

値	説明
<identifier>	カウンタ名を指定します。
<integer>	リセット値を指定します。省略すると 0 にリセットします。
none	増加しません。

使用例

CSS

body {
  counter-reset: chapter 3;
}
h1 {
  counter-increment: chapter;
  counter-reset: section;
}
h1:before {
  content: counter(chapter) ". ";
}
h2 {
  counter-increment: section;
  counter-reset: subsection;
}
h2:before {
  content: counter(chapter) "." counter(section) " ";
}
h3 {
  counter-increment: subsection;
}
h3:before {
  content: counter(chapter) "." counter(section) "." counter(subsection) " ";
}

HTML

<h1>Web入門</h1>
<h2>HTML</h2>
<h3>HTMLとは</h3>
<h3>HTMLリファレンス</h3>
<h2>CSS</h2>
<h3>CSSとは</h3>

CSS - counter-reset

概要

説明

使用例

Web入門

HTML

HTMLとは

HTMLリファレンス

CSS

CSSとは

関連項目

リンク