[CSS] Explaining the counters() function that supports hierarchical structures instead of just counter()

There is a function called "counter()" that allows for numbering in CSS.

For example, with this HTML:

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

If you write this CSS:

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

It will be output like this:

PR

On the other hand, there is also a function called "counters()".

Using this,

When you have a hierarchical structure like this, you can number by inheriting the parent's number.

This is done

with HTML like this:

<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>

and CSS like this:

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

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

It is written as follows.

For example,

if you do this:

content: counters(lists, ".");

it will look like this:

if you do this:

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

it will look like this:

I hope this has been helpful.

Using CSS counters - CSS: Cascading Style Sheets | MDN

PR