Take a look at this piece of code from Codepen. It’s just a simple ordering list, but the list is broken up into several sections. The numerical order continuous as it spills over to other sections. It even changes to Roman numbering in the last section. How is this possible?

Just HTML and CSS. No Javascript. The key is adding the appropriate CSS to the ol markup.

Just look at the examples below.

<pre lang="html">
// Start the list at number 6
<ol start="6">
</ol>

<pre lang="html">
// Start the list at number 11. Assign "roman" class to it.
<ol class="roman" start="11">
</ol>

The CSS for “roman” is:

<pre lang="css">
.roman { list-style-type:upper-roman; }

Pretty neat.