6

I need to implement the following list style:

01 Item 1
02 Item 2
    02a Item 2a
    02b Item 2b
03 Item 3

How can I get the counter value of the parent to use in the :before content of my sub item? (02 in my above example)

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Colin
  • 255
  • 1
  • 10

3 Answers3

8

You use two different counters: one for the li parents and one for the li subitems. Then, in each li subitem, concatenate multiple counter() functions using each counter, like this:

ol {
    counter-reset: item;
}

ol ol {
    counter-reset: subitem;
}

li {
    display: block;
}

/* First level of parent items */
li:before {
    content: counter(item, decimal-leading-zero) ' ';
    counter-increment: item;
}

/* Second level of subitems */
li li:before {
    /* counter(item) for the parents, counter(subitem) for the subitems */
    content: counter(item, decimal-leading-zero) counter(subitem, lower-alpha) ' ';
    counter-increment: subitem;
}

jsFiddle demo, tested in all browsers that support :before and CSS2.1 counters including IE8+

Useful reading: W3C CSS2.1 generated content spec, §12.4.1 Nested counters and scope

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • +1 for `counter-increment` but it comes `01a 02b` not `02a 02b` – xkeshav Nov 18 '11 at 18:34
  • @diEcho: Fixed! Thanks again for pointing out the error earlier :) – BoltClock Nov 18 '11 at 18:58
  • Awesome! You can apply any list-style-type to a counter so you can use "decimal-leading-zero". Thanks for the help. – Colin Nov 18 '11 at 20:44
  • @Colin: Oh right, I missed that :) Remember that you can mark an answer as accepted by clicking its checkmark. Glad to help! You could even say I had fun with this answer ;) – BoltClock Nov 18 '11 at 20:46
0

See this: there is no way to do such things in CSS, obviously you would need to use JavaScript for it but pseudo-elements are not in the DOM afaik. As for the other answers: he wants the value of the counter that appears before the list items.

Community
  • 1
  • 1
Viruzzo
  • 3,025
  • 13
  • 13
  • You can't get the value of a CSS counter through JavaScript, but you can still access it using CSS. Counters are a complex little thing, but check out my answer for how. – BoltClock Nov 18 '11 at 19:05
  • I guess I misunderstood the question, as I thought the wanted to be able to read the counter value (hence the need for JavaScript). The "get" in the question misled me (but to be fair, it is tagged for CSS only). – Viruzzo Nov 22 '11 at 09:23
-1

No, CSS doesn't support such "variable" things. All you can do is set the same style as parent.

Moe Sweet
  • 3,683
  • 2
  • 34
  • 46
  • 1
    Err, no the CSS 2.1 spec for counters is strong. My question was really about how to get multiple instances of counters. Theres both a counter() and counters() function. counters() returns the full count tree but you can't individually format the list-style-type of each branch of the tree. I was going down the wrong path with counters() before I asked my question. – Colin Nov 18 '11 at 20:47