ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Счётчики


Пицца

Гамбургер

Хотдоги

CSS счётчики - это "переменные", поддерживаемые CSS, значения которых можно увеличивать с помощью правил CSS (чтобы отслеживать, сколько раз они используются). Счетчики позволяют настраивать внешний вид контента в зависимости от его размещения в документе.


Автоматическая нумерация с помощью счётчиков

CSS счётчики похожи на "переменные". Значения переменных могут быть увеличены с помощью правил CSS (которые будут отслеживать, сколько раз они используются).

Для работы со счетчиками CSS мы будем использовать следующие свойства:

  • counter-reset - создает или сбрасывает счетчик
  • counter-increment - увеличивает значение счетчика
  • content - вставляет сгенерированный контент
  • counter() или counters() функция - добавляет значение счетчика к элементу

Чтобы использовать счетчик CSS, его необходимо сначала создать с помощью counter-reset.

В следующем примере создается счетчик для страницы (в селекторе body), затем увеличивается значение счетчика для каждого элемента <h2> и добавляется "Section <значение счётчика>:" в начало каждого элемента <h2>:

Пример

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
Попробуйте сами »

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

В следующем примере создается один счетчик для страницы (section) и один счетчик для каждого элемента <h1> (subsection). Счётчик "section" будет подсчитываться для каждого элемента <h1> с помощью "Section <значения счётчика section>.", а счётчик "subsection" будет подсчитываться для каждого элемента <h2> с помощью "<значения счётчика section>.<значение счётчика subsection>":

Пример

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
Попробуйте сами »

Счетчик также может быть полезен для составления списков, поскольку в дочерних элементах автоматически создается новый экземпляр счетчика. Здесь мы используем функцию counters() для вставки строки между различными уровнями вложенных счетчиков:

Пример

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
Попробуйте сами »

 Свойства CSS счётчика

Свойство Описание
content Используется с псевдоэлементами ::before и ::after для вставки сгенерированного контента
counter-increment Увеличивает одно или несколько значений счетчика
counter-reset Создает или сбрасывает один или несколько счетчиков