Description:
The list-style-type property sets the counting (or bullet) style used in the marker for a list item.
Possible Values:
Here are the values which can be used for an unordered list:
| Value |
Description |
| none |
NA |
| disc (default) |
A filled-in circle |
| circle |
An empty circle |
| square |
A filled-in square |
Here are the values which can be used for an ordered list:
| Value |
Description |
Example |
| decimal |
Number |
1,2,3,4,5 |
| decimal-leading-zero |
0 before the number |
01, 02, 03, 04, 05 |
| lower-alpha |
Lowercase alphanumeric characters |
a, b, c, d, e |
| upper-alpha |
Uppercase alphanumeric characters |
A, B, C, D, E |
| lower-roman |
Lowercase Roman numerals |
i, ii, iii, iv, v |
| upper-roman |
Uppercase Roman numerals |
I, II, III, IV, V |
| lower-greek |
The marker is lower-greek |
alpha, beta, gamma |
| lower-latin |
The marker is lower-latin |
a, b, c, d, e |
| upper-latin |
The marker is upper-latin |
A, B, C, D, E |
| hebrew |
The marker is traditional Hebrew numbering |
|
| armenian |
The marker is traditional Armenian numbering |
|
| georgian |
The marker is traditional Georgian numbering |
|
| cjk-ideographic |
The marker is plain ideographic numbers |
|
| hiragana |
The marker is hiragana |
a, i, u, e, o, ka, ki |
| katakana |
The marker is katakana |
A, I, U, E, O, KA, KI |
| hiragana-iroha |
The marker is hiragana-iroha |
i, ro, ha, ni, ho, he, to |
| katakana-iroha |
The marker is katakana-iroha |
I, RO, HA, NI, HO, HE, TO |
Applies to:
All the elements with a display of list-item.
DOM Syntax:
| object.style.listStyleType="decimal" |
Example:
Here is the example:
<ul style="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:sqaure;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
|
This will produce following result:
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
- Maths
- Social Science
- Physics
|
|
