Как посчитать количество элементов на чистом CSS

CSS
Допустим у нас есть блок с ID block, в котором находятся элементы (<span> или другие), и нам надо посчитать их на чистом CSS:
<div id="block">
    <span></span>
    <span></span>
    <span></span>
</div>

Добавим блок, для вывода количества элементов:
<div id="sum"></div>

Затем считаем на чистом CSS:
#block {
	counter-reset: block;
}

#block > span {
	counter-increment: block;
}

#sum:before {
	content: counter(block);
}

CSS посчитает элементов в блоке и выведет результат в блок <div id="sum"></div>.
Автор:  19:48 2.06.2024