ПитерСайт » Блог » Вложенный CSS-счётчик

Вложенный CSS-счётчик

Автоматическая нумерация элементов многоуровневого списка. С помощью только CSS:

Data
Data
1. Data
2. Data
  1. Data
  2. Data
  3. Data
3. Data
Data

HTML код:


<ol>
	<li>Data</li>
	<li>Data
		<ol>
			<li>Data</li>
			<li>Data
				<ol>
					<li>Data</li>
					<li>Data</li>
					<li>Data</li>
				</ol>
			</li>
			<li>Data</li>
		</ol>
	</li>
	<li>Data</li>
</ol>

CSS код:


ol {list-style-type: none; counter-reset: number;}
ol li {counter-increment: number;}
ol li:before {content: counters(number, ".") ". ";}

Поддержка в браузерах

Windows: Internet Explorer 8.0+, Edge 12.0+, Firefox 1.5+, Google Chrome 2.0+, Opera 10.0+
Linux: Firefox 1.5+, Google Chrome 2.0+, Opera 10.0+
Android: Samsung Internet 1.0+, Chrome Android 18.0+, Firefox for Android 25.0+, Opera Android 10.1+
iOS: Safari 1.0+

Теги: CSS, CSS-счётчики

Опубликовано: 11 Декабря, 2025
Последнее редактирование: 11 Декабря, 2025