Ordered list CSS style includes parent number

Asked 12/12, 2012 at 14:18 Answered 12/12, 2012 at 15:6

We're looking to use CSS to create an ordered list that looks like this:

A.
A.1
A.2
B.
C.
C.1
C.2
C.2.1
C.2.2

How would you include the parent index in the child like this?

Rush answered 12/12, 2012 at 14:18 Comment(1)

possible duplicate of HTML/CSS Outline numbering – Gaelic 12/12, 2012 at 16:57

You should use CSS counters ^{W3C specs} (as @Zeta) has pointed out, but here is an approach that will handle multiple nesting and latin counters ..

ol{
    list-style: none;
}
ol.roman{
    counter-reset: roman;
}
ol.roman > li:before{
    counter-increment: roman;
    content: counter(roman, upper-latin)".";
    padding-right:5px;
}
ol.roman li ol{
    counter-reset: inner;
}
ol.roman ol li:before{
    counter-increment: inner;
    content: counter(roman, upper-latin)"."counters(inner,'.');
    padding-right:5px;
}

Demo at http://jsfiddle.net/gaby/nZQSF/

Corpuscle answered 12/12, 2012 at 15:6 Comment(2)

Spot on - was busy implementing the other answer when I realised it wasn't using alpha characters as I specified in the question – Rush 12/12, 2012 at 15:17

Nice solution, but in real world you will always have multiline items, and it will not look perfect (counters will become almost invisible). – Parfitt 24/7, 2019 at 12:1

You'll need to use CSS counters.

Example (from MDN)

CSS:

ol {
  counter-reset: section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}
li:before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " ";   /* Adds the value of all instances
                                            of the section counter separated
                                            by a ".". */
}

HTML:

<ol>
 <li>Entry
 <li>Entry
 <li>Entry with subentries
  <ol>
    <li>Entry
    <li>Entry
    <li>Entry
    <li>Entry
  </ol>
 <li>Entry
 <li>Entry
 <li>Entry with subentries
  <ol>
    <li>Entry
    <li>Entry
    <li>Entry
    <li>Entry
  </ol>
</ol>

JSFiddle

Windbreak answered 12/12, 2012 at 14:20 Comment(5)

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Superabundant 12/12, 2012 at 14:39

@C.A.McCann: Don't worry, I know this. However, I wasn't able to edit my answer since I wasn't able to open stackoverflow.com for about 20 minutes. I guess there's something wrong with my VPN. – Windbreak 12/12, 2012 at 14:44

Just so you know, that's a canned comment from the Low Quality review page--your answer got picked up for having a link and very little other content. It should be fine now--thanks for improving it! – Superabundant 12/12, 2012 at 14:47

Thanks. I added the closing </li> tags in jsfiddle and it broke, which is a problem because we're getting the markup back from a wysiwyg control. Is there a simple fix? – Rush 12/12, 2012 at 14:50

My bad, I was putting some of the tags in the wrong places. Working fine now. – Rush 12/12, 2012 at 15:3