0

I'm trying to get CSS counters to increment items that indicate sub-items. Perhaps because the HTML is not nested, the reset doesn't look like it's working as I'd expect. Can anyone help me understand why? If I reset the sub-item counter in the body selector, all the sub-items get treated just like the items, ignoring the second reset.

CSS definitions:

body {
  counter-reset: panel item;
  font-family: monospace;
}

div.panel-heading:before {
  counter-increment: panel;
  content: "Panel " counter(panel, upper-roman) ". ";
}

div.panel-body div.item:before {
  counter-increment: item;
  content: "Item " counter(item) ". ";
  counter-reset: sub-item;
}

div.panel-body div.sub-item:before {
  counter-increment: sub-item;
  content: "sub-item " counter(item) counter(sub-item, lower-alpha) ". ";
}

HTML body:

<div class="panel">
  <div class="panel-heading">
    &lt;- should be I </div>
  <div class="panel-body">
    <div class="item">
      &lt;- should be 1
    </div>
    <div class="sub-item">
      &lt;- should be 1a
    </div>
    <div class="sub-item">
      &lt;- should be 1b
    </div>
    <div class="sub-item">
      &lt;- should be 1c
    </div>
    <div class="item">
      &lt;- should be 2
    </div>
    <div class="sub-item">
      &lt;- should be 2a
    </div>
    <div class="sub-item">
      &lt;- should be 2b
    </div>
  </div>
</div>
<div class="panel">
  <div class="panel-heading">
    &lt;- should be II </div>
  <div class="panel-body">
    <div class="item">
      &lt;- should be 3
    </div>
    <div class="sub-item">
      &lt;- should be 3a
    </div>
    <div class="item">
      &lt;- should be 4
    </div>
    <div class="sub-item">
      &lt;- should be 4a
    </div>
    <div class="sub-item">
      &lt;- should be 4b
    </div>
    <div class="sub-item">
      &lt;- should be 4c
    </div>
  </div>
</div>

Here's a jsfiddle for convenience.

end-user
  • 2,845
  • 6
  • 30
  • 56

1 Answers1

0

Ok, I figured it out. I found some posts online that suggested resets in a pseudo selector don't work. I moved them out and it now works as expected. This doesn't appear to affect the increment, however.

div.panel-body > div.item {
  counter-increment: item;
  counter-reset: sub-item;
}

div.panel-body > div.item:before {
  content: "Item " counter(item) ". ";
}

here's the working solution fiddle

end-user
  • 2,845
  • 6
  • 30
  • 56
  • Yes, your problem was indeed because of the sub-item counter being reset under the `div.item:before`. The `:before` element is a child element of the `div.item` and so its value is known only to that element. The next `div` (which is the `.sub-item`) doesn't know about the existence of this counter or its value (doesn't inherit it) and so every `.sub-item` creates a sub-item counter of its own and sets to `a`. When you reset the counter at `div.item`, the value of that counter is inherited by all its siblings and so each `.sub-item` can increment to b, c and so on. – Harry May 03 '16 at 16:03
  • You may find the detailed explanation in this answer (http://stackoverflow.com/questions/31658111/how-do-i-stop-div-tags-interfering-with-counters/31660287#31660287 ) helpful. I don't think it is a dupe because the cases are a bit different but you'll understand more about how counter scope and inheritance works. – Harry May 03 '16 at 16:04