Break in an ordered list

Question

I wish to make an ordered list like the one below. It is essential that the numbering be broken up the way it has been, i.e. 2A after 2, 6A, 6B, 6C after 6 followed by 7.

1.  Text goes here
2.  More text here
2A. This is what I need
3.  List continues like this
4.  And it goes on
5.  And on
6.  But here
6A. There is another sub section
6B. And another
6C  And another
7.  Is this possible?
8.  Please guide me.

EDIT: What I intend to do here is to digitalize a piece of constitutional legislation. There were sections 1, 2, 3, 4, 5, 6 and 7, an amendment inserted sections 2A, 6A, 6B and 6C. It makes sense on paper to avoid renumbering the sections and inserting new sections in this manner, but I want to do it purely by HTML. I am not using any server side scripting, only HTML, CSS and might include a little Java.

The code I already have is the simple list:

Is it possible to break and insert 2A after 2 and then continue with 3? I tried using tables, but didn't like the idea, as that would not be copy-paste friendly.

Are the elements followed by a character sub items - like `2A` being a sub item of `2`? — insertusernamehere, Oct 04 '13 at 11:59
Do you use server side scripting like Php or ASP? Or it is simply an HTML doc? — Edper, Oct 04 '13 at 12:04
You could use Counters: http://www.w3.org/TR/CSS2/syndata.html#counter — Joren, Oct 04 '13 at 12:04
possible duplicate of [Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?](http://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1) — Joren, Oct 04 '13 at 12:05
You realise you've forgotten to show us your HTML, right? Or did you want us to write the HTML for you as well as the styling..? And why would `6A` not be the first of the `6` items? Is the `6` some form of a heading? — David Thomas, Oct 04 '13 at 12:19

score 1 · Accepted Answer · answered Oct 04 '13 at 12:17

You can make each item a div element and include the numbers into the content. If you want a tabular look as in your example, you can alternatively use a table element, with numbers in one column, texts in another:

<table>
<tr><td>1.<td>Text goes here
<tr><td>2.<td> More text here
<tr><td>2A<td>This is what I need
...
</table>

(You could make cells in the first column th elements rather than td, on the grounds that they are header-like, row headers, and should be treated as headers by assistive software. But then you probably want to say th { text-align: left; font-weight: normal } in CSS.)

This means that if items are added, moved, or removed, the numbering in the content must be modified, but this appears to be rather tailored numbering anyway.

If you are forced to use ol, then you need somewhat complicated CSS to remove the default numbering (the easy part) and to add your numbers as generated content. But due to the special nature of the list, this too requires that parts of the numbering scheme are hardwired into the code.

A table is the simplest and most robust solution to the problem of presenting a list as shown in the question. You can say no as many times as you wish. And I can call this tabular data if I so wish (it is actually a matrix rather clearly). — Jukka K. Korpela, Oct 04 '13 at 12:33
I had considered tables before, but Tables are not copy-paste friendly: especially while copying from the web page to a word document. — Ahmer Jamil Khan, Oct 04 '13 at 15:32

erKURITA · Answer 2 · 2013-10-04T16:28:30.763

Here's a working Fiddle, using the counters @Joren mentioned:

http://jsfiddle.net/erKURITA/EruGX/7/

Basically what you want are several selectors that target the nested and li elements:

ol {
    list-style-type: none;
    counter-reset: sub_index;
}

:not(li) > ol > li {
    counter-increment: index;
}

li > ol > li:before {
    counter-increment: sub_index;
    content: counter(index,decimal)'.'counter(sub_index,upper-alpha)' ';
}

:not(li) > ol > li:before {
    content: counter(index,decimal)' ';
}

~~Add a "top" class to the topmost li and you're set.~~

EDIT: Updated with a version that does not use classes

Break in an ordered list

2 Answers2