Home > other >  how to create an ordered list in html with descendant index
how to create an ordered list in html with descendant index

Time:10-18

i am doing an html project right now and i am trying to make an ordered list with a descendant index, i want it to start with 10 and end with 1. is there an easy and simple way to do so or should i just use the pseudo::before element? thanks in advance

<ol type="1">
            <li>ten</li>
            <li>nine</li>
            <li>eight</li>
            <li>seven</li>
            <li>six</li>
            <li>five</li>
            <li>four</li>
            <li>three</li>
            <li>two</li>
            <li>one</li>
        </ol>

CodePudding user response:

Have you tried using the reversed attribute?

Check out this tutorial on W3schools for more information.

CodePudding user response:

The ordered list allows users to setup multiple parameters:

reversed This Boolean attribute specifies that the list’s items are in reverse order. Items will be numbered from high to low.

start An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering type is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use start="4".

type Sets the numbering type:

a for lowercase letters

A for uppercase letters

i for lowercase Roman numerals

I for uppercase Roman numerals

1 for numbers (default)reversed

This Boolean attribute specifies that the list’s items are in reverse order. Items will be numbered from high to low.

in this case you have to simply add flag reversed like:

<ol type="1" reversed>
  <li>ten</li>
  <li>nine</li>
  <li>eight</li>
</ol>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

Use reversed parameter to make descendant index.

<ol type="1" reversed>
    <li>ten</li>
    <li>nine</li>
    .
    .
    .
    <li>two</li>
    <li>one</li>
</ol>

CodePudding user response:

Use the reversed attribute

<ol type="1" reversed>
    <li>ten</li>
    <li>nine</li>
    <li>eight</li>
    <li>seven</li>
    <li>six</li>
    <li>five</li>
    <li>four</li>
    <li>three</li>
    <li>two</li>
    <li>one</li>
 </ol>
  •  Tags:  
  • html
  • Related