Атрибут reversed тега <ol> — нумерація навпаки
Атрибут reversed - являється логічним атрибутом.
Якщо він присутній, то він визначає, що порядок списку повинен бути спадаючим (3,2,1 ...), а не зростаючим (1, 2, 3 ...).
При цьому змінюється тільки нумерація списку, а не порядок шикування інформації.
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<ol reversed>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 18 | 18 | 6 | 15 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 18 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута reversed теґа <ol>
<p><b>Приклад використання атрибуту <code>reversed</code></b></p>
<p>Місяці:</p>
<ol reversed>
<li>Грудень</li>
<li>Листопад</li>
<li>Жовтень</li>
<li>Вересень</li>
<li>Серпень</li>
<li>Липень</li>
<li>Червень</li>
<li>Травень</li>
<li>Квітень</li>
<li>Березень</li>
<li>Лютий</li>
<li>Січень</li>
</ol>
<br><br>
<p><b>Приклад без використання атрибуту <code>reversed</code></b></p>
<p>Місяці:</p>
<ol>
<li>Грудень</li>
<li>Листопад</li>
<li>Жовтень</li>
<li>Вересень</li>
<li>Серпень</li>
<li>Липень</li>
<li>Червень</li>
<li>Травень</li>
<li>Квітень</li>
<li>Березень</li>
<li>Лютий</li>
<li>Січень</li>
</ol>Найпростіший приклад використання HTML атрибута reversed теґа <ol>
HTML
<p><b>Приклад використання атрибуту <code>reversed</code></b></p>
Нумерація в порядку спадання<input type = "radio" id="myButton" name = "sex"value = "female" ><br>
Нумерація в порядку зростання<input type = "radio" id="Button" name = "sex"value = "female" ><br><br>
<p>Місяці:</p>
<ol id="m1">
<li>Грудень</li>
<li>Листопад</li>
<li>Жовтень</li>
<li>Вересень</li>
<li>Серпень</li>
<li>Липень</li>
<li>Червень</li>
<li>Травень</li>
<li>Квітень</li>
<li>Березень</li>
<li>Лютий</li>
<li>Січень</li>
</ol>JS
document.getElementById('myButton').onclick = function () {
document.getElementById('m1').reversed = true;};
document.getElementById('Button').onclick = function () {
document.getElementById('m1').reversed = false;};
//# sourceURL=pen.jsЧотири списки з однаковим вмістом. Другий — з reversed: пункти на місці, номери йдуть униз. Третій показує, що start при зворотному відліку задає номер ПЕРШОГО пункту. Четвертий доводить, що значення атрибута не читається взагалі: reversed="false" перевертає нумерацію так само.
HTML
<div class="row">
<div>
<p>Звичайний</p>
<ol><li>Перший</li><li>Другий</li><li>Третій</li><li>Четвертий</li></ol>
</div>
<div>
<p>reversed</p>
<ol reversed><li>Перший</li><li>Другий</li><li>Третій</li><li>Четвертий</li></ol>
</div>
<div>
<p>reversed start="10"</p>
<ol reversed start="10"><li>Перший</li><li>Другий</li><li>Третій</li><li>Четвертий</li></ol>
</div>
<div>
<p>reversed="false"</p>
<ol reversed="false"><li>Перший</li><li>Другий</li><li>Третій</li><li>Четвертий</li></ol>
</div>
</div>CSS
.row { display: flex; flex-wrap: wrap; gap: 1.6em; }
.row p { margin: 0 0 .3em; font-weight: bold; }
ol { margin: 0; padding-left: 2.4em; }
li { padding: .1em 0; }
li::marker { color: #1d6fa5; font-weight: bold; }Різниця між HTML 4.01 та HTML5
Атрибут reversed тега <ol> з'явився тільки в HTML5.
Різниця між XHTML та HTML
У XHTML мінімізований запис атрибутів заборонено,тому атрибут reversed HTML тега <ol> має бути визначений як <ol reversed="reversed">.
Коментарі
Коментарів ще немає — будьте першим!