2

I'm using CSS counters to try to build this ordered list:

X.
Y.
Z.
AA.
BB.
CC.

So far, I've got this:

X.
Y.
Z.
AA.
AB.
AC.

In the html, I have to skip ahead 26 items to get from AA to BB, instead of AA to AB. Apparently, CSS counters don't take into consideration the value="54" attribute in the <li> tag.

Anyone know of a way to handle this without having to create another <ol> that starts at BB?

There was a similar question, but the answer isn't quite there. How can you customize the numbers in an ordered list?

Thanks! - Michael M.

Community
  • 1
  • 1
itsmikem
  • 2,118
  • 2
  • 26
  • 31
  • Why are you using counters? That seems to be pretty well accomplished by `
      `. (For some values of “well”.) Also, is this for a spreadsheet-like device? Generate them with JavaScript…
     – Ry- Jul 31 '13 at 20:02
  • The type is decimal, so no need for that attribute. I never knew about that html attribute. I've been setting my lists as CSS list-style-type. Also, it's not a spreadsheet, so this isn't a task for js. Thanks for reading my question though, I appreciate it! – itsmikem Jul 31 '13 at 20:10
  • Sorry, I misread `value="54"` as `start="54"`. So what element is `value="54"` on? – Ry- Jul 31 '13 at 20:12
  • No problem. It's on the li element. That would work in straight html, but I'm using CSS. The response below from Kalley did the trick. Thanks for taking interest in my question, minitech. – itsmikem Jul 31 '13 at 20:18
  • 1
    You can also use `value` attr. with attribute selectors, like http://jsfiddle.net/XRhSQ/ – Ilya Streltsyn Jul 31 '13 at 20:19

1 Answers1

5

here's something that works: http://jsfiddle.net/8PKjj/1/

ol {
    counter-reset: item 23;
    list-style: none;
}
li {
    position: relative;
}
li:before {
    counter-increment: item;
    content: counter(item, upper-alpha) '.';
    position: absolute;
    left: -2em;
}
li.big-jump:before {
    counter-increment: item 27;
}

It's not the prettiest thing, but it's a place to start.

kalley
  • 18,072
  • 2
  • 39
  • 36