CODEWITHSUNDEEP
htmlcssformat
user3054465
user3054465

Reputation: 39

HTML ordered list formatting

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

Upvotes: 1

Views: 372

Answers (2)

Petr Hruzek
Petr Hruzek

Reputation: 630

.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>

Upvotes: 1

user1012181
user1012181

Reputation: 8726

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>

Upvotes: 2

Related Questions