Атрибут reversed тега <ol>

Описание

Атрибут reversed указывает, что нумерованный список должен отображаться в обратном порядке (по убыванию). Это булевый атрибут - его наличие (без значения) меняет порядок нумерации на обратный.

Пример использования:
<ol reversed> <li>Третье место</li> <li>Второе место</li> <li>Первое место</li> </ol>

Особенности работы:

Состояние Описание Как задать
Обычный порядок Нумерация по возрастанию (1, 2, 3...) <ol> (без атрибута)
Обратный порядок Нумерация по убыванию (3, 2, 1...) <ol reversed> или <ol reversed="reversed">

Динамическое управление:

<ol id="dynamic-list"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ol> <button onclick="toggleReversed()">Переключить порядок</button> <script> function toggleReversed() { const list = document.getElementById('dynamic-list'); list.reversed = !list.reversed; // Инвертируем текущее состояние } </script>

Рекомендации по использованию:

  • Используйте для отображения рейтингов, топ-списков и других случаев, где важен обратный порядок
  • Сочетайте с атрибутом start для точного контроля над нумерацией
  • Помните, что атрибут меняет только отображение номеров, не порядок элементов в DOM

Пример с атрибутом start:

<ol reversed start="5"> <li>Пятое место</li> <li>Четвертое место</li> <li>Третье место</li> </ol>

Стилизация обратного списка:

<style> ol[reversed] li { color: #d9534f; font-weight: bold; } ol[reversed] li:first-child { color: #5cb85c; } </style> <ol reversed> <li>Бронза</li> <li>Серебро</li> <li>Золото</li> </ol>

Ограничения и совместимость:

  • Поддерживается во всех современных браузерах
  • В IE не поддерживается до версии 11
  • Для кросс-браузерности может потребоваться JavaScript-полифил

Примечание: Атрибут reversed особенно полезен при создании рейтингов и топ-списков, где естественнее видеть элементы в порядке убывания. Для сложных случаев сортировки рассмотрите использование JavaScript.