Ordered List with Parented Value

Question

Now, please, before everyone starts called this a duplicate, read the situation. I'm aware of solutions to this in a straight-forward manner, but they are NOT "dynamic". Let me show you what I mean:

Using a variation of the solution found at Ordered list CSS style includes parent number to restrict the effects to OL with .parented applied, I've got this:

ol.parented {
  counter-reset: parent;
  margin-left: .6875em !important;
}

ol.parented, .parented ol {
  list-style: none !important;
}

ol.parented > li:before {
  counter-increment: parent;
  content: counter(parent) ".";
  padding-right: 9px;
}

ol.parented li ol {
  counter-reset: child;
}

ol.parented ol li:before {
  counter-increment: child;
  content: counter(parent) "." counters(child, '.');
  padding-right: 9px;
}

This allows

<ol class="parented">
  <li>Value 1<ol>
    <li>Value 1.1</li>
    <li>Value 1.2</li>
    <li>Value 1.3</li>
  </ol></li>
  <li>Value 2<ol>
    <li>Value 2.1</li>
    <li>Value 2.2</li>
    <li>Value 2.3</li>
  </ol></li>
  <li>Value 3<ol>
    <li>Value 3.1</li>
    <li>Value 3.2</li>
    <li>Value 3.3</li>
  </ol></li>
 </ol>

to appear like

1. Value 1
  1.1 Value 1.1
  1.2 Value 1.2
  1.3 Value 1.3
2. Value 2
  2.1 Value 2.1
  2.2 Value 2.2
  2.3 Value 2.3
3. Value 3
  3.1 Value 3.1
  3.2 Value 3.2
  3.3 Value 3.3

What it doesn't allow is for the skipping for values (defining which value is next). As such, if I were to use

<ol class="parented">
  <li value="4">Value 4<ol>
    <li>Value 4.1</li>
    <li>Value 4.2</li>
    <li>Value 4.3</li>
  </ol></li>
</ol>

I get

1. Value 4
  1.1 Value 4.1
  1.2 Value 4.2
  1.3 Value 4.3

Does anyone know how I can manipulate the counter to use the updated LI values to reflect in the generated list? In other words, my last snippet should look like

4. Value 4
  4.1 Value 4.1
  4.2 Value 4.2
  4.3 Value 4.3

I'm going to go out on a limb here and say that this is a limitation of CSS2.1 counters. Even [this sample in css-lists](http://dev.w3.org/csswg/css-lists/#ua-stylesheet) shows CSS pseudo-code for `li[value]` which contains syntax that is not implemented anywhere, including a previously-nonexistent `counter-set` property. — BoltClock, Jul 08 '15 at 18:55

score 0 · Answer 1 · answered Jul 08 '15 at 18:56

0

If you can modify the HTML to include a custom attribute, this would be a trivial task with a pseudo element:

ol {
    list-style: none;
}

li:before {
    content: attr(data-value);
    display: inline-block;
    margin-right: 5px;
}

<ol class="parented">
  <li data-value="1.">Value 1<ol>
    <li data-value="1.1">Value 1.1</li>
    <li data-value="1.1">Value 1.2</li>
    <li data-value="1.1">Value 1.3</li>
  </ol></li>
  <li data-value="4.">Value 4<ol>
    <li data-value="4.1">Value 4.1</li>
    <li data-value="4.2">Value 4.2</li>
    <li data-value="4.3">Value 4.3</li>
  </ol></li>
 </ol>

answered Jul 08 '15 at 18:56

Turnip

35,836
15
89
111

1

It would be more accurate to say "If you can modify every single li element to include a custom attribute". – BoltClock Jul 08 '15 at 18:58
might as well just set the inner content of the `
` with the `data-value` value and not create the `data-value` attr at all

zgood

Jul 08 '15 at 19:04

I'm assuming OP does't actually want numbers in their content. Otherwise I doubt they would be asking the question in the first place. – Turnip Jul 08 '15 at 19:07

1

Not disagreeing with your solution, since it's pretty much the only one; my point is that it's anything but trivial. – BoltClock Jul 08 '15 at 19:07

I suppose it depends on how the lists are generated server-side and what the numbers represent. Assuming these values are coming from a data source it should be simple – Turnip Jul 08 '15 at 19:11

Is there an alternative to using a `data` attribute? I just tested it and found that the system I'm working with strips the `data` attribute from the saved code. I tried swapping it for the `value` attribute, instead, but it didn't work. Further, it's preferred not to have to set the value everytime, if possible. – Christopher Esbrandt Jul 08 '15 at 19:18

Not that I can think of sorry. You _could_ do something like [this (link)](http://jsfiddle.net/2g476jfx/1/), but it does seem very hack-y. – Turnip Jul 08 '15 at 19:38

Yeah, that wouldn't work. Some of the uses for this would be to intentionally have things listed by priority for a subsection. So, it may be priority 1 for the project but be the third listed for that particular section. I'm sorry, this is a bit of a mess. I'd've simply used JavaScript if it were an option, but all JavaScript is stripped by the system, and it's a hit or miss on CSS. :( Do you know of a way to set a counter with the `attr` function? My attempts have failed miserably. :S – Christopher Esbrandt Jul 08 '15 at 19:42

Christopher Esbrandt · Accepted Answer · 2015-07-09T18:27:56.343

I ended up writing some JavaScript to generate a stylesheet with unique classes for each LI to set the value.

var lists = document.getElementsByClassName('parented');
for(var i = 0; i < lists.length; i++) {
  var test = lists[i].getElementsByTagName('li'), parent = [], cparent = 0, j = 0;
  for(var k = 0; k < test.length; k++) {
    if((test[k].getElementsByTagName('ol').length + test[k].getElementsByTagName('ul').length) != 0) {
      parent.push(test[k]);
      k++;
    }
  }
  var style = document.createElement('style');
  style.id = 'parented';
  document.head.appendChild(style);
  style = document.getElementById('parented');
  for(var k = 0; k < parent.length; k++) {console.log(cparent);
    var pnum = (parent[k].hasAttribute('value') ? parent[k].getAttribute('value') : (parseInt((k < cparent) ? cparent : k) + 1));
    cparent = pnum;
    var child = parent[k].getElementsByTagName('li'), rule = 'parent' + (i + 1) + pnum, content = pnum;
    style.innerHTML = style.innerHTML + '.' + rule + '::before { content: "' + content + '."; }';
    parent[k].className = rule;
    for(var l = 0; l < child.length; l++) {
      rule = 'parent' + (i + 1) + pnum + (l + 1);
      content = pnum + '.' + (l + 1);
      style.innerHTML = style.innerHTML + '.' + rule + '::before { content: "' + content + '"; }';
      child[l].className = rule;
    }
  }
}

ol.parented {
  margin-left: .6875em !important;
}
ol.parented, .parented ol {
  list-style: none !important;
}
ol.parented > li:before, ol.parented ol li:before {
  padding-right: 9px;
}

<ol class="parented">
  <li>Value 1<ol>
    <li>Value 1.1</li>
    <li>Value 1.2</li>
    <li>Value 1.3</li>
  </ol></li>
  <li value="4">Value 4<ol>
    <li>Value 4.1</li>
    <li>Value 4.2</li>
    <li>Value 4.3</li>
  </ol></li>
  <li>Value 5<ol>
    <li>Value 5.1</li>
    <li>Value 5.2</li>
    <li>Value 5.3</li>
  </ol></li>
  <li>Value 6<ol>
    <li>Value 6.1</li>
    <li>Value 6.2</li>
    <li>Value 6.3</li>
  </ol></li>
  <li value="10">Value 10<ol>
    <li>Value 10.1</li>
    <li>Value 10.2</li>
    <li>Value 10.3</li>
  </ol></li>
</ol>

Here's a JSFiddle, if preferred: http://jsfiddle.net/pua0b62s/

If anyone has an idea on how to do this with JavaScript, that'd be very much appreciated, but I don't think that's possible. I could be wrong, and I hope I am, because that's something more for me to learn. :)

Ordered List with Parented Value

2 Answers2