HTML ordered list formatting

Question

is it possible to have my ordered list in the following format?

heading
1.1. text...
1.2. text
1.2.1 text

Another heading
1.3. text
1.3.1. text
1.3.2. text
1.4. text

Is that possible? Thank you

This might help. http://stackoverflow.com/questions/4615500/how-to-start-a-new-list-continuing-the-numbering-from-the-previous-list — dommer, Oct 08 '15 at 17:18
This was already answered here: http://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1 — , Oct 08 '15 at 17:21

score 2 · Accepted Answer · answered Oct 08 '15 at 17:29

2

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

<ol>
    <li> Cat</li>
    <li>Bat</li>
    <li>Mat
        <ol>
            <li>Red Mat</li>
            <li>Green Mat</li>
        </ol>
    </li>
    <li>Pat</li>
    
</ol>

answered Oct 08 '15 at 17:29

user1012181

8,648
10
64
106

@user3054465: Let me know if this helped you. – user1012181 Oct 08 '15 at 19:57

score 1 · Answer 2 · answered Oct 08 '15 at 20:17

.contract ol {
    counter-reset: item
}
.contract li.paragraph {
    counter-increment: item;
}
.contract li li.paragraph:before {
    content: counters(item, ".")" ";
}
.contract li {
    list-style-type: none;
}
.contract ol {
    padding-left: 0;
}

<section class="contract">
    <ol>
        <li class="paragraph">
            <ol>
                <li>
                     <h2>Heading</h2>

                </li>
                <li class="paragraph">text</li>
                <li class="paragraph">text
                    <ol>
                        <li class="paragraph">text</li>
                    </ol>
                </li>
                <li>
                     <h2>Another heading</h2>

                </li>
                <li class="paragraph">text
                    <ol>
                        <li class="paragraph">text</li>
                        <li class="paragraph">text</li>
                    </ol>
                </li>
                <li class="paragraph">text</li>
            </ol>
        </li>
    </ol>
</section>

HTML ordered list formatting

2 Answers2