< ClearExperience >

Редакция:	16.09.2023
Теги:	CSS + Заметки

Нумерованные списки

Demo

Первый уровень
1. Второй уровень
  1. Третий уровень

Нумерация дочерних списков начинается с номера родителя.

HTML

1

2

3

4

5

6

7

8

9

10

11

<ol>

<li>Первый уровень

<ol>

<li>Второй уровень

<ol>

<li>Третий уровень</li>

</ol>

</li>

</ol>

</li>

</ol>

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

ol {

counter-reset: level1;

list-style-type: none;

}

ol ol {

counter-reset: level2;

}

ol ol ol {

counter-reset: level3;

}

ol li {

list-style-type:none;

}

ol li::before {

counter-increment: level1;

content: counter(level1) '. ';

}

ol ol li::before {

counter-increment: level2;

content: counter(level1) '.' counter(level2) ' ';

}

ol ol ol li::before {

counter-increment: level3;

content: counter(level1) '.' counter(level2) '.' counter(level3) ' ';

}