Возврат к списку

13.12.2013

Счетчики в CSS

Псевдоэлементы :before и :after помимо всего прочего позволяют создавать автоматическую нумерацию любых элементов.

Создание и управление счетчиками регулируется двумя свойствами counter-reset и counter-increment. Для отображения счетчика используются функции counter() или counters(), применяемые к свойству content.

Counter-reset — определяет точку начала отсчета счетчика и его идентификатор. В качестве значения counter-reset принимает одну или несколько пар идентификатор-целое. Идентификатор — это имя, которое будет задано счетчику. Это обязательный параметр. В качестве имени не допустимы значения ‘none’, ‘inherit’ и ‘initial’, т.к. являются зарезервированными значениями.

Целое — целое число с которого будет начат отсчет счетчика. Параметр не обязательный и по умолчанию равнятеся 0. Допустимо указывать и отрицательные значения.

Counter-increment — аналогично в качестве значения принимает одну или несколько пар идентификатор-целое, где идентификатор — имя существующего счетчика (обязательный параметр), а целое — величина его приращения счетчика (необязательный параметр), который по умолчанию равен 1, также может принимать отрицательные значения и 0. Приращение происходит до вывода самого счетчика. Поэтому, если необходимо, чтобы нумерация начиналась с нуля, в counter-reset в качестве точки начала необходимо задатать -1

.line {
    counter-reset: line -1;
}

Пример создания простого счетчика:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: items;
}

li:before {
    content: counter(items) '. ';
    counter-increment: items;
}

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

Дама сдавала в багаж:
  • Диван
  • Чемодан
  • Саквояж
  • Корзину
  • Картину
  • Картонку
  • Маленькую собаченку

Аналогично можно создать счетчик. проставляющий нумерацию в обратном порядке. Для этого просто нужно у качестве числа-прирощения указать -1.

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: items;
}

li:before {
    content: counter(items) '. ';
    counter-increment: items -1;
}
Дама сдавала в багаж:
  • Диван
  • Чемодан
  • Саквояж
  • Корзину
  • Картину
  • Картонку
  • Маленькую собаченку

Правила каскада

Counter-reset аналогично другим свойствам подчиняется правилам каскада. Т.е. в примере ниже применется только последнее свойство.

h1 {counter-reset: section -1}
h1 {counter-reset: imagenum 99}

Для того чтобы правило применилось к обеим счетчикам нужно указать их совместно.

H1 { counter-reset: section -1 imagenum 99 }

Вид счетчика

Для того чтобы непосредственно отобразить счетчик используется функция counter(). Помимо имени самого счетчика, вторым параметром counter() может определять стиль этого счетчика — counter(name, list-style-type). По умолчанию счетчики — это десятичные числа.

Название стиля Внешний вид
decimal Десятичные числа — 1, 2, 3…
decimal-leading-zero Десятичные числа, начинающиеся с нуля (например: 01, 02, 03, …, 98, 99).
lower-roman Маленькие римские числа (i, ii, iii, iv, v, и т.д.).
upper-roman Большие римские числа (I, II, III, IV, V, и т.д.).
georgian Традиционная грузинская нумерация (ა, ბ, გ, დ, ე, ვ, ზ и т.д.).
armenian Традиционная армянская нумерация (Ա, Բ, Գ, Դ, Ե, Զ, Է и т.д.)
lower-latin или lower-alpha Маленькие латинские буквы (a, b, c, … z).
upper-latin или upper-alpha Большие латинские буквы (A, B, C, … Z).
lower-greek Буквы греческого алфавита (α, β, γ, …)
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: items;
}

li:before {
    content: counter(items, lower-greek) '. ';
    counter-increment: items;
}
Дама сдавала в багаж:
  • Диван
  • Чемодан
  • Саквояж
  • Корзину
  • Картину
  • Картонку
  • Маленькую собаченку

Многоуровневые списоки и область видимости

Каждый уровень вложенности создает новую область видимости для любого заданного счетчика. Это удобно, например, в списках, где может быть неограниченный уровень вложенности

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: items;
}

li:before {
    content: counter(items) '. ';
    counter-increment: items;
}
  • Элемент
    • Элемент
    • Элемент
    • Элемент
  • Элемент
    • Элемент
    • Элемент
    • Элемент

Если нам потребуется реализовать нумерацию вида 1.2., то мы могли бы написать следующий код

ul {
	list-style: none;
	counter-reset: items;
}

ul ul {
	counter-reset: items2;
}

li:before {
	content: counter(items) '. ';
	counter-increment: items;
}

li li:before {
	content: counter(items) '.' counter(items2) '. ';
	counter-increment: items2;
}
  • Элемент
    • Элемент
    • Элемент
    • Элемент
  • Элемент
    • Элемент
    • Элемент
    • Элемент

Но при уже при уровне вложенности больше 3-х прописание всех свойств превращается в пытку и раздувает код. К счастью спецификация предусмотрела для таких случаев функцию counters. Синтаксис её может иметь следущий вид: counters(счетчик, строка) или counters(счетчик, строка, стиль). Где строка определяет каким образом счетчики будут соединятся друг с другом. Третьим параметром задается стиль для всех счетчиков. Таким образом предыдущий пример можно переписать следующим образом:

ul {
	list-style: none;
	counter-reset: items;
}

li:before {
	content: counters(items,'.');
	counter-increment: items;
}
  • Элемент
    • Элемент
    • Элемент
    • Элемент
  • Элемент
    • Элемент
    • Элемент
    • Элемент

Нумерация элементов с display: none

Элементы для которых задано свойство display: none не могут ни увеличивать, ни устанавливать счетчика. Элементы для которых задано visibility: hidden участвуют в подсчете наравне с остальными элементами


Возврат к списку