วิธีระบุลำดับรายการแบบถอยหลัง (Descending) ใน HTML

ใช้แอตทริบิวต์ reversed ใน HTML เพื่อระบุว่าลำดับรายการควรเป็นแบบถอยหลัง (Descending: 9, 8, 7, 6, 5...)

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ reversed:

<!DOCTYPE html>
<html>
  <body>
    <h3>Cricketers List</h3>
    <ol reversed>
      <li>Amit</li>
      <li>Amal</li>
      <li>Rahul</li>
      <li>Virat</li>
    </ol>
  </body>
</html>

การทำงานของ reversed

• เป็น Boolean attribute - มีอยู่ = true, ไม่มี = false
• นับถอยหลังจากจำนวนรายการทั้งหมด (4 items = 4, 3, 2, 1)
• ใช้ได้กับ <ol> เท่านั้น
• ร่วมกับ start ได้: <ol reversed start="10"> เริ่มที่ 10 นับลง

ตัวอย่างร่วมกับ start

<!-- เริ่มที่ 10 นับลง: 10, 9, 8, 7, 6 -->
<ol reversed start="10">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>

<!-- Top 10 Countdown -->
<ol reversed start="10">
  <li>Song 10</li>
  <li>Song 9</li>
  <li>Song 8</li>
  <!-- ... -->
  <li>Song 1</li>
</ol>

การจัดสไตล์หมายเลขด้วย CSS

ol[reversed] {
  counter-reset: list-counter 11; /* start + 1 */
  list-style: none;
}

ol[reversed] li {
  counter-increment: list-counter -1;
}

ol[reversed] li::before {
  content: counter(list-counter) ". ";
  font-weight: bold;
  color: #333;
}

Attribute value (ค่าเริ่มต้นของรายการแรก)

<ol>
  <li value="5">Five</li>     <!-- 5 -->
  <li>Six</li>                <!-- 6 -->
  <li value="10">Ten</li>    <!-- 10 -->
  <li>Eleven</li>             <!-- 11 -->
</ol>

Type Attribute (รูปแบบตัวเลข)

<ol type="1">   <!-- 1, 2, 3... (default) -->
<ol type="A">   <!-- A, B, C... -->
<ol type="a">   <!-- a, b, c... -->
<ol type="I">   <!-- I, II, III... -->
<ol type="i">   <!-- i, ii, iii... -->

<ol reversed type="I"> <!-- X, IX, VIII... -->

หมายเหตุ: reversed, start, type เป็น Global attributes ของ <ol> รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด