Creating an Ordered list with Numbers and Letters combined
How do you make an Alpha numeric ordered list in HTML css?
Ordered List and Unordered List are great for pointing out a list of items to be shown in a Web Page.
An Unordered List assigns a default (•) in every item in the list while the Ordered List assigns a default number from 1 to N.
Here's an example of them side by side.
Ordered List
- Ordered item 1
- Ordered item 2
- Ordered item 3
Unordered List
- Unordered item 1
- Unordered item 2
- Unordered item 3
Changing the CSS property list-style-type to either/both <ul> (Unordered List) and <ol> (Ordered List) will change how the listing will show in the browser.
Change the value of the input below to see how each property values are shown in the browser.
HTML
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
CSS ol{
list-style-type: disc;
}
Creating an Alpha Numeric listing can only be achieved by manually combining (lower-alpha) or (upper-alpha) with (decimal) or vice versa of the list-style-type of the <ol>.
HTML
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
CSS ol{
list-style-type: none;
}
ol > li{
list-style: none;
counter-increment: num;
counter-increment: letter;
}
ol > li:before{
content: counter(num) counter(letter, upper-alpha) " - ";
}
Will give of this HTML
- item 1
- item 2
- item 3
Basically here's how the CSS is telling the browser.
Remove the default list-style-type of the <ol> and list-style of the <li>.
Every <li> will have a corresponding number and letter.
Here's a better example of how this can be used.
Table of Contents
- Introduction
- HTML List
- What is counter-increment?
- What is and how to use content?
- Examples
- Basic Example
- Letter List
- Number List
- Letter & Number List
- Advanced Example
- Nested Letter List
- Nested Number List
- Nested Letter & Number List
HTML
<ol class="customList">
<li>
Introduction
<ol>
<li>HTML List</li>
<li>What is counter-increment?</li>
<li>What is and how to use content?</li>
</ol>
</li>
<li>
Examples
<ol>
<li>
Basic Example
<ol>
<li>Letter List</li>
<li>Number List</li>
<li>Letter & Number List</li>
</ol>
</li>
<li>
Advanced Example
<ol>
<li>Nested Letter List</li>
<li>Nested Number List</li>
<li>Nested Letter & Number List</li>
</ol>
</li>
</ol>
</li>
</ol>
CSS ol.customList{
list-style-type: none;
}
ol.customList> li{
list-style: none;
counter-increment: chapterNum;
}
ol.customList> li:before{
font-weight: bold;
content: "Chapter " counter(chapterNum) ".";
}
ol.customList> li > ol{
list-style-type: none;
}
ol.customList> li > ol > li{
list-style: none;
counter-increment: chapterSub;
}
ol.customList> li > ol > li:before{
font-weight: bold;
content: counter(chapterNum) "." counter(chapterSub) " ";
}
ol.customList> li > ol > li > ol{
list-style-type: none;
}
ol.customList> li > ol > li > ol > li{
list-style: none;
counter-increment: chapterSubSub;
}
ol.customList> li > ol > li > ol > li:before{
font-weight: bold;
content: counter(chapterNum) "." counter(chapterSub) "." counter(chapterSubSub, lower-alpha) " ";
}
Replies (0)
Reply