CODEWITHSUNDEEP
htmlcssfrontend
koleS
koleS

Reputation: 1323

HTML nested numbered list with starting index

In my application I have a page which lists some data grouped by categories.

Each item on the list can have subitems.

So I'd it to look like this:

  1. List item

    1.1 List item

    1.2 List item

  2. List item

    2.1 List item

    2.2 List item

I can achieve this easily using this three lines of css code:

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

However on this page I have tabs for each category, which contains such nested list of items and I want to make index of first item of next tab to be x+1-th item, where x is number of last item from previous tab ( category ).

#tab 1
 1. List item

   1.1 List item

   1.2 List item
 2. List item

   2.1 List item

   2.2 List item

#tab 2
 3. List item

   3.1 List item

   3.2 List item
 4. List item

   4.1 List item

   4.2 List item

So I need functionality to provide starting index to <ol> tag. I found out that there is attribute start="x", however it doesn't work with these 3 lines of css code for nested lists.

Any idea how to do something like this?

Upvotes: 3

Views: 2929

Answers (2)

Ryan
Ryan

Reputation: 659

From http://www.w3.org/TR/css3-lists/#html4:

/* The start attribute on ol elements */
ol[start] { 
    counter-reset: list-item attr(start, integer, 1); 
    counter-increment: list-item -1; 
}

Adding this to the CSS allowed the start attribute to be recognized in my tests.

EDIT: Instead of using the start attribute, you can use CSS classes for each new starting point. The downside is that this will require more maintenance should you need to change anything.

CSS:

ol.start4
{
    counter-reset: item 4;
    counter-increment: item -1;
}

ol.start6
{
    counter-reset: item 6;
    counter-increment: item -1;
}

HTML:

<div>
<ol>
<li>Item 1</li>
<li>Item 2
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol></li>
<li>Item 3
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol></li>
</ol>
</div>

<div>
<ol class="start4">
<li>Item 4
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol></li>
<li>Item 5</li>
</ol>
</div>

<div>
<ol class="start6">
<li>Item 6</li>
<li>Item 7
    <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    </ol></li>
</ol>
</div>

Upvotes: -1

Lorenzo Marcon
Lorenzo Marcon

Reputation: 8179

Just remove the css, and correctly close and reopen <ol> tags.

If you need to split the list in two separate tabs, you have to close the first <ol> inside the first tab. Then, reopen the new list with the start parameter inside the second tab: <ol start="3">.

Working fiddle - (I set start="5" to show it's working; for your purposes, just set it to 3 or what you need)

UPDATE:

Keep the CSS, and wrap all the tabs in the main <ol> and </ol>, so the counter doesn't reset.

http://jsfiddle.net/qGCUk/227/

Upvotes: -1

Related Questions