I wish to acheive this list:

 1. One
 2. Two
 2.1. Two point One
 2.2. Two point Two
 3. Three
 4. Four

9 answers

11
points
This was chosen as the best answer

It is possible. You can read about this in the CSS 2 spec on http://www.w3.org/TR/CSS2/generate.html#scope

An example: With the following css (straight out of the example in the spec):

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

And the following HTML:

           <ol>
        <li>First level</li>
        <li>First level 2
            <ol>
                <li>Second level</li>
                <li>Second level 2
                    <ol><li>Third level</li></ol>
                </li>
            </ol>
        </li>           
    </ol>

You get the desired result, at least in safari 4 and firefox 3.5:

1. First level
2. First level 2
    2.1 Second level
    2.2 Second level 2
           2.2.1 Third level
Answered over 7 years ago by Joost van der Borg
3
points

Your best bet to differentiate nested lists is to specify a different type:

<ol type="1">
    <li>One</li>
    <li>Two
        <ol type="a">
            <li>Two point One</li>
            <li>Two point Two</li>
        </ol>
    </li>
    <li>Three</li>
    <li>Four</li>
</ol>

I don't think it's possible to have a nested numbering (such as 2.1 or 2.1.3).

You can also use the CSS attribute list-style-type to indicate the type (e.g. upper-latin for 1,2,...; upper-roman for I,II,...; lower-alpha for a,b,...; etc.).

Answered over 7 years ago by Nikki Erwin Ramirez
2
points
Yes.

    <ol>
      <li>One</li>
      <li>Two
        <ol>
          <li>Two point one</li>
          <li>Two point two</li>
        </ol>
      </li>
      <li>Three</li>
      <li>Four</li>
   </ol>
Answered over 7 years ago by Lee Willis
0
points

I needed to pull together a Harvard-style outline the other day for a project. Here's the relevant CSS:

ol li { list-style-type: upper-roman; }
ol li ol li { list-style-type: upper-alpha; }
ol li ol li ol li { list-style-type: decimal; }
ol li ol li ol li ol li { list-style-type: lower-latin; }
ol li ol li ol li ol li ol li { list-style-type: lower-roman; }

You could of course swap these for <ul>s, but a sequential outline is an ordered list.

Answered over 7 years ago by Daniel Ryan
adrinux 33
0
points

You can nest lists.

ul
li  /li
li
  ul
     li
     li
  /ul
/li

li /li /ul

If you see what I mean :)

Answered over 7 years ago by adrinux
grm 3
0
points

Not exactly what he wants though. Perhaps this is helpful? http://stackoverflow.com/questions/602667/sub-items-in-ordered-lists-for-ie6-and-ie7

Answered over 7 years ago by grm
0
points

nested ordered lists can also have a start number, but you'll need to be inventive to get the point numbering. i.e. <ol start="2"> will have numbers starting from 2

Answered over 7 years ago by Tony Crockford
frujo 38
0
points

Hello! As people above wrote it is not really possible with HTML/CSS only (actually it is, but there will be no cross-browser solvation to the problem, as soon as IE6 doesn't suppot some CSS 2.1 stuff). But with addition of some JS dreams come true :) The code inserting here sucks, so I created a snippet at snipplr.com. The code and the example.

Answered over 7 years ago by frujo
0
points

Great responses here, thanks!

I'd prefer not to use JavaScript but the jQuery approach is nice. Also, whilst Joost van der Borg's answer was the most accurate and received my "best answer" star, I actually used Nikki Erwin Ramirez's approach - using lower-roman numbering for my sublist - in my code.

Thanks everybody.

Answered over 7 years ago by Matt Sephton