• Skip to main content

Uly.me

cloud engineer

  • Home
  • About
  • Archives

Continuous Order List

December 26, 2014

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.

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

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

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

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

The CSS for “roman” is:

.roman { list-style-type:upper-roman; }

.roman { list-style-type:upper-roman; }

Pretty neat.

Filed Under: CSS, HTML Tagged With: order list

Search This Website

Subscribe Via Email

  • Home
  • About
  • Archives

Copyright © 2023