Задать начальное число для списка в HTML через CSS

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Чтобы установить начальное значение для упорядоченного списка, вы можете использовать атрибут start:

HTML

Скопировать код

<ol start="10">
  <li>Проба пера: мы начинаем с 10!</li>
  <li>И вот уже единадцатый пункт, без проблем!</li>
</ol>

В итоге, нумерация списка начнётся с числа 10, вместо обычного стартового значения 1. Жизненно важно помнить, что тут важен не конечный результат, а сам процесс.

Пройдите тест и узнайте подходит ли вам сфера IT

Пройти тест

Атрибут 'start': Нумерация списков с произвольного значения

Установка начального значения списка с помощью 'start'

Атрибут start – удобный механизм в HTML5 для начала нумерации элементов списка с любого числа:

HTML

Скопировать код

<ol start="100">
  <li>Остатки прошлого, что начинаются со 100!</li>
  <li>Ещё один шаг и мы на 101 месте!</li>
</ol>

Итак, вы сами решаете, с какого значения начнётся отсчет, даже если это значение равно 💯.

Компатибельность: HTML5 и HTML 4.01

Не забывать про прошлое – это значит не допустить повторения ошибок! К счастью, несмотря на то что в HTML 4.01 атрибут start был убран, HTML5 вернул его обратно. Всего лишь убедитесь, что используетесь документ <!DOCTYPE html> для корректной работы HTML5:

HTML

Скопировать код

<!DOCTYPE html>
<html>
<head>
<title>Специальная страница</title>
</head>
<body>
<ol start="3">
  <li>Третий пункт – начало списка</li>
  <li>Четвёртый пункт, уже лучше, не так ли?</li>
  <li>Пятую позицию мы заслужили!</li>
</ol>
</body>
</html>

CSS: Повышаем стилистические возможности списков

Когда функционал HTML не удовлетворяет ваши потребности, приходит на помощь CSS с его счётчиками:

Для задания начального значения в ol используйте counter-reset:

CSS

Скопировать код

ol {
  counter-reset: list-counter 4; /* Начинаем с 5 – почему бы и нет? */
}

li {
  list-style-type: none; /* Кто сказал, что нам нужны обычные маркеры? */
  counter-increment: list-counter; /* И так начинается отсчет */
}

li:before {
  content: counter(list-counter) ". "; /* Знаки пунктуации важны */
}

Это, конечно, не новости, но благодаря CSS-счётчикам, ваши списки могут быть преобразованы во что-угодно.

Контролирование нумерации элементов списка: использование атрибута 'value'

Временами, может возникнуть потребность управлять номерами конкретных элементов списка. В таком случае можно применить атрибут value:

HTML

Скопировать код

<ol>
  <li>Просто первый элемент!</li>
  <li value="5">Тут мы прыгаем сразу на пятое место, какое приключение!</li>
  <li>И вот шестой элемент списка подоспел!</li>
</ol>

И таким образом '5' встал на второе место, в то время как остальная нумерация осталась прежней.

Визуализация

Визуализация процесса установления начального значения для ol:

HTML

Скопировать код

<ol start="5">
  <li>Кофе☕</li>
  <li>Чай🍵</li>
  <li>Молоко🥛</li>
</ol>

Это не спортивная гонка, быть первым здесь необязательно:

Markdown

Скопировать код

🏁 1.
🏁 2.
🏁 3.
🏁 4.
👟 5. Кофе
👟 6. Чай
👟 7. Молоко

Здесь каждый "элемент списка" начинается с присвоенного ему номера:

Markdown

Скопировать код

**Традиционная гонка**: 🏁 1. 🏃 2. 🏃 3. 🏃 (Бегун номер 1)
**HTML список**:          🏁 5. 📄 6. 📄 7. 📄 (Элементы списка номер 5)

Атрибут start устанавливает начальную позицию для списка.

Способы обхода трудностей: Глубокое руководство

Кроссбраузерная совместимость: Необходимая предосторожность

Ответственность следует вместе с властью. Этот принцип работает и в случае кроссбраузерной совместимости! Тестирование в различных браузерах поможет предотвратить неприятные сюрпризы с отображением элементов.

О заботе о доступности

Убедитесь, что ваши креативные способы нумерации списков не приводят к сбоям в работе технологий помощи и не наводят путаницу при озвучивании контента.

Использование JavaScript: Управление динамическими списками

В быстро меняющемся мире, где списки обновляются каждый час, стоит задуматься об использовании JavaScript для контроля атрибута start или CSS-счётчиков, чтобы обеспечить гибкость и последовательность.

Сборник практических примеров

Вселенная примеров на JSFiddle и поддержка CodePen — живые демонстрации покажут вам способы использования HTML и CSS.
Стремитесь к использованию этих практических примеров. Ведь опыт – это всё в нашем деле.

Полезные материалы

<ol>: Упорядоченный список элементов – HTML: HyperText Markup Language | MDN — Полная информация о start.
Тег ol в HTML – W3Schools — Пособие по применению тега start.
HTML Standard – WHATWG — Изнанка истории о том, как ol стал уникальным.

Свежие материалы

Управляющие конструкции в C

30 августа 2024

Разработка консольных приложений на C

30 августа 2024

Указатели и массивы в C

30 августа 2024