【CSS】counter()ではなく､階層構造に対応したcounters()関数を解説

CSSでナンバリングできる「counter()」という関数があります｡

例えばこういうHTMLで

<ul class="counter">
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>

こういうCSSを書くと

.counter {
	counter-reset: number;
}
.counter li::before {
	counter-increment: number;
	content: counter(number);
}

このように出力されます｡

一方で「counters()」という関数もあります｡

これを使うと

こういう階層構造になってるときに､親のナンバーを引き継いでナンバリングできます｡

これは

このようなHTMLで

<ul class="counters">
	<li>リスト</li>
	<li>リスト
		<ul class="counters">
			<li>子リスト</li>
			<li>子リスト</li>
		</ul>
	</li>
	<li>リスト
		<ul class="counters">
			<li>子リスト</li>
			<li>子リスト
				<ul class="counters">
					<li>孫リスト</li>
					<li>孫リスト</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>リスト</li>
</ul>

このようなCSSです｡

.counters {
	counter-reset: lists;
}
.counters li::before {
	counter-increment: lists;
	content: counters(lists, "-");
}

content: "任意の文字" counters(カウンター名, "区切り文字") "任意の文字";

のように記述します｡

例えば

このようにすると

content: counters(lists, ".");

このようになり

このようにすると

content: "[" counters(lists, ".") "] : ";

このようになります｡

以上､参考になれば幸いです｡

CSS カウンターの使用 - CSS: カスケーディングスタイルシート | MDN