Search code examples
nestedhtml-listsreveal.js

Nested ordered list type not changing in reveal.js

I'm writing a reveal.js project and I can't seem to change the types of the ordered lists.

What I want:

  1. Fruits

    a. Orange

    b. Banana

    c. Apple

  2. Vegetables

    a. Carrot

    b. Lettuce

    c. Cabbage

I wrote:

<section> <ol type="1"> <li> Fruits <ol type="a"> <li>Orange</li> <li>Banana</li> <li>Apple</li> </ol> </li> <li> Vegetables <ol type="a"> <li>Carrot</li> <li>Lettuce</li> <li>Cabbage</li> </ol> </li> </ol> </section>

What I get:

  1. Fruits
    1. Orange
    2. Banana
    3. Apple
  2. Vegetables
    1. Carrot
    2. Lettuce
    3. Cabbage

What am I doing wrong? Is there a restriction in reveal.js that keeps me from changing the types?

Solution

  • I ended up using a css class to change it instead.

    So it now looks like: 

    <style>
    ol.alphaList {list-style-type: lower-alpha;}
</style>

<section>
<ol type="1">
    <li>
        Fruits
        <ol class="alphaList">
            <li>Orange</li>
            <li>Banana</li>
            <li>Apple</li>
        </ol>
    </li>
    <li>
        Vegetables
        <ol class="alphaList">
            <li>Carrot</li>
            <li>Lettuce</li>
            <li>Cabbage</li>
        </ol>
    </li>
</ol>