Css content номер элемента

Счётчики в CSS

Подробно разбираемся как браузер считает элементы и как этим управлять через CSS.

Время чтения: больше 15 мин

Обновлено 22 февраля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

CSS-счётчики — это мощный инструмент для нумерации любых элементов страницы, не только списков.

Создание счётчиков

Скопировать ссылку «Создание счётчиков» Скопировано

После наследования набора счётчиков от предыдущего одноуровневого и родительского элементов происходит создание счётчиков.

Создавать новые счётчики может не только свойство counter — reset .

Если вы применили свойство counter — increment или counter — set , или воспользовались функцией counter ( ) или counters ( ) и указали имя несуществующего счётчика:

 li  /* Сначала создаст счётчик с именем new, а затем увеличит его значение на 2 */ counter-increment: new 2;> li  /* Сначала создаст счётчик с именем new, а затем установит его значение на 2 */ counter-set: new 2;> li::marker  /* Сначала создаст счётчик с именем new, а затем подставит его значение */ content: counter(new);> li::marker  /* Аналогично */ content: counters(new, '.');> li  /* Сначала создаст счётчик с именем new, а затем увеличит его значение на 2 */ counter-increment: new 2; > li  /* Сначала создаст счётчик с именем new, а затем установит его значение на 2 */ counter-set: new 2; > li::marker  /* Сначала создаст счётчик с именем new, а затем подставит его значение */ content: counter(new); > li::marker  /* Аналогично */ content: counters(new, '.'); >    Скопировать Скопировано Не удалось скопировать   

В таком случае на элементе сначала создастся новый счётчик с именем new и начальным значением 0. После создания счётчика свойства counter — increment и counter — set , и функции counter ( ) и counters ( ) начнут действовать как обычно.

Если элемент уже содержит унаследованный счётчик с именем n , который был создан одноуровневым предыдущим элементом, и вы создаёте на элементе счётчик с точно таким же именем n , то этот счётчик заменит унаследованный.

   
Первый абзац 
Второй абзац 
Третий абзац  div> p class="first">Первый абзацp> p class="second">Второй абзацp> p class="third">Третий абзацp> div>    Скопировать Скопировано Не удалось скопировать   

На элементе создаём счётчик c именем new и начальным значением 0:

 div  counter-reset: new 0;> div  counter-reset: new 0; >    Скопировать Скопировано Не удалось скопировать   

Теперь у элемента в наборе имеется один, созданный им же счётчик с именем new .

Создаём ещё один счётчик, но уже на элементе

. Назовём его paragraph :

 p  counter-reset: paragraph 1;> p  counter-reset: paragraph 1; >    Скопировать Скопировано Не удалось скопировать   

Первый дочерний элемент с классом first наследует свой начальный набор счётчиков от родительского элемента и также создаёт собственный счётчик с именем paragraph .

Теперь у элемента

с классом first в наборе два счётчика: один унаследованный от родительского элемента , второй собственно созданный счётчик.

Так как является предшествующим элементом в порядке дерева, элемент с классом first наследует также значение счётчика new — 0.

Следующий элемент

с классом second унаследует точно такой же набор счётчиков от предыдущего одноуровневого элемента

с классом first , но как только это произойдёт он перезапишет счётчик paragraph элемента

c классом first на собственно созданный счётчик.

Последний элемент

с классом third сделает абсолютно тоже самое.

Увеличим элементу с классом second значение счётчика paragraph :

 .second  counter-increment: paragraph 1;> .second  counter-increment: paragraph 1; >    Скопировать Скопировано Не удалось скопировать   

Подставим значение счётчика paragraph в псевдоэлемент : : before элементов с классами first , second и third чтобы пронумеровать их:

 p::before  content: counter(paragraph);> p::before  content: counter(paragraph); >    Скопировать Скопировано Не удалось скопировать   

Разница между counter ( ) и counters ( )

Скопировать ссылку «Разница между counter() и counters()» Скопировано

В итоговой демке выше нумерация (значение счётчиков) была выведена при помощи функции counters ( ) .

Функция counters ( ) выводит значения всех счётчиков с указанным именем в наборе:

Вторым аргументом функции counters ( ) важно указать разделитель в виде строки. Эта строка будет разделять значения всех счётчиков с указанным именем.

Функция counter ( ) выводит значение только последнего счётчика с указанным именем.

Выведем ту же самую демку, но используем функцию counter ( ) :

Как видно элемент

с классом display и псевдоэлемент : : before элемента с классом content не увеличили значение счётчика new .

Элементы с visibility : hidden не подчиняются этому правилу и увеличивают значение счётчика.

Неявный счётчик элементов списка

Скопировать ссылку «Неявный счётчик элементов списка» Скопировано

В дополнение к любым явно определённым в CSS счётчикам, любые элементы с display : list — item автоматически имеют в своём наборе специальный неявный счётчик с именем list — item .

Счётчиком list — item можно управлять так же как и обычным явным счётчиком.

Если в значении свойства counter — increment явно не указывается значение на которое счётчик list — item будет увеличиваться от элемента к элементу, то он автоматически увеличивается браузером на 1 для каждого элемента со свойством display : list — item .

Однако если вы укажете другое значение, например:

 li  counter-increment: list-item 2;> li  counter-increment: list-item 2; >    Скопировать Скопировано Не удалось скопировать   

автоматическое увеличение счётчика list — item будет переопределено и теперь его значение будет увеличиваться на 2.

Вы также можете указать значение 0, тогда счётчик list — item вообще перестанет увеличиваться.

 li  counter-increment: list-item 2;> li  counter-increment: list-item 2; >    Скопировать Скопировано Не удалось скопировать   

На самом деле это очень удобно, когда уже есть готовый неявный счётчик. Если вам нужно создать многоуровневый нумерованный список, это можно сделать в два счёта:

Выведем нумерацию при помощи функции counters ( ) :

 li::marker  content: counters(list-item, '.');> li::marker  content: counters(list-item, '.'); >    Скопировать Скопировано Не удалось скопировать   

Всё! Больше ничего делать не нужно.

Особенность списка

Скопировать ссылку «Особенность списка ol» Скопировано

Любые вносимые в HTML изменения нумерации списка также будут учитываться счётчиком.

атрибут start и значение с которого следует начинать нумерацию, или атрибут reversed , чтобы пронумеровать список в обратном порядке, то данные атрибуты будут учитываться при нумерации списка. Также это касается элемента
и его атрибута value :

Выведем нумерацию при помощи функции counters ( ) :

 li::marker  content: counters(list-item, '.');> li::marker  content: counters(list-item, '.'); >    Скопировать Скопировано Не удалось скопировать   

Полная поддержка подобного поведения, пока что, реализована только в Mozilla Firefox.

На практике

Скопировать ссылку «На практике» Скопировано

Алексей Степанов советует

Скопировать ссылку «Алексей Степанов советует» Скопировано

🛠 Вы вдохновились выступлением Никиты Дубко и решили написать курсовую оформленную через CSS? Счётчики помогут вам сделать автоматическую нумерацию страниц, рисунков, вашего содержания и списка литературы, а также глав и подглав вашего научного труда.

Или у вас есть интересное дизайнерское решение вроде изображённого в начале статьи?

Также вы можете посмотреть две переведённые статьи на тему счётчиков:

Источник

Стили для нумерованных списков ol

Несколько примеров как задать стили у нумерации списков с применением счетчика counter и псевдоэлемтов :before и :after .

HTML разметка

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
2. Nulla facilisi etiam dignissim diam quis enim
3. Sit amet purus gravida quis blandit turpis
4. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing

Цвет нумерации

Большие цифры

Квадратные маркеры

Круглые маркеры

Отбивающая линия

ol < list-style-type: none; counter-reset: num; margin: 0 0 0 60px; padding: 15px 0 5px 0; font-size: 16px; position: relative; >ol li < position: relative; margin: 0 0 0 0; padding: 0 0 10px 0; line-height: 1.4; >ol li:before < content: counter(num); counter-increment: num; display: inline-block; position: absolute; top: 0; left: -55px; width: 28px; height: 28px; background: #fff; color: #000; text-align: center; line-height: 28px; font-size: 18px; border-radius: 50%; border: 1px solid #ef6780; >/* Вертикальная линия */ ol:before

Пошаговый список

ol < list-style-type: none; counter-reset: num; position: relative; margin: 0 0 0 60px; padding: 15px 0 5px 0; font-size: 16px; >ol li < position: relative; margin: 0 0 0 0; padding: 0 0 10px 0; line-height: 1.4; >ol li:after < content: counter(num); counter-increment: num; display: inline-block; position: absolute; top: 0; left: -45px; width: 28px; height: 28px; line-height: 28px; background: #fff; color: #000; text-align: center; font-size: 18px; border-radius: 50%; border: 1px solid #ef6780; >/* Вертикальная линия */ ol:before < content: ''; position: absolute; top: 15px; bottom: 15px; left: -30px; width: 1px; border-left: 1px solid #ef6780; >/* Скрытие линии у последнего li */ ol li:last-child:before

Комментарии

Другие публикации

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.

Такой вопрос возникает при вставке текста из формы на сайт (отзывы, комментарии и т.д.) с форматированием элементом p.

Пример реализации всплывающей подсказки или меню с затемнением фона на jQuery и CSS, в верстке использованы блок со.

Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.

Источник

Счетчики. Автоматическая нумерация в CSS

Довольно часто приходиться пользоваться нумерацией: при создании различных списков, перечней, оформлении оглавления или содержания и т.п.

В CSS для автоматизации процесса нумерации используются счетчики.

Для начала приведем простой пример. Затем посложнее — создадим вложенный список с автоматизированной нумерацией его пунктов и подпунктов.

Идентификация счетчика

Сначала необходимо идентифицировать счетчик.

С помощью свойства counter-reset счетчику присваивается имя и начальное значение. Имя может быть любым, но не может начинаться с цифры.

Эта запись говорит о том, что для тега установлен счетчик с именем number и начальным значением 3 .

По умолчанию начальное значение счетчика равно 0 .

Приращение счетчика

Далее необходимо определить элемент, который будет нумероваться.

Для этого служит свойство counter-increment . Также оно используется для задания приращений счетчика — числа, на которое будет увеличиваться значение счетчика.

Этот фрагмент кода говорит о том, что абзацы (тег ) в теле документа будут нумероваться счетчиком number с приращением равным 3 .

Первый абзац будет под номером 6 , так как начальное значение счетчика 3 и его приращение равно 3 .

По умолчанию значение приращений счетчика равно 1 .

Сейчас все необходимые параметры счетчика заданы: имя, начальное значение, приращение и элемент, который будет нумероваться. Далее.

Отображение счетчика

Теперь необходимо вывести значение счетчика и задать правила его расположения. Это делается с помощью свойства content и псевдоэлементов before и after .

Свойство content вставляет содержимое до (before) или после ( after ) указанного элемента.

Итак, к предыдущему фрагменту кода мы добавили свойство content , которое выводит слово «равно» , затем значение счетчика number и точку «.» . Все это вставляется на страницу после содержимого абзаца (тега ), о чем говорит псевдоэлемент after .

Пример автоматической нумерации в CSS

Ниже представлен описанный пример.

2 умножить на 3

3 умножить на 3

4 умножить на 3

5 умножить на 3

Вложенные списки с автоматической нумерацией

Давайте рассмотрим пример применения счетчиков для автоматизации процесса нумерации вложенных списков.

Вам должно быть уже известно, как из HTML, так и при изучении списков в CSS, что пункты списка нумеруются автоматически. Но эта нумерация является простейшей.

А как насчет автоматической нумерации подпунктов вида 1.1, 1.2, 2.1, 2.2 и т.д.?

Эта задача решается при помощи счетчиков, позволяющих автоматизировать процесс нумерации вложенных списков.

ol ol < counter-reset : podpunkt ;>/* Устанавливаем новый счетчик для вложенного списка, и даем ему имя podpunkt.*/
ol ol li:before < counter-increment : podpunkt ; /*Устанавливаем, что будут нумероваться пункты вложенного списка. Значение приращений счетчика по умолчанию равно 1. */
content : counter(punkt) «.» counter(podpunkt) ;> /* Выводим сначала значение счетчика punkt, затем точка, и далее значение счетчика podpunkt .*/

1. Первый подпункт 3-го пункта
2. Второй подпункт 3-го пункта
3. Третий подпункт 3-го пункта

Вот так происходит автоматизация процесса нумерации вложенных списков!

Источник