Счетчики CSS: не сбрасываются, если есть оболочка вне OL

Question

Я пытался создать собственный упорядоченный список (OL) используя "CSS Counters", взяв в качестве примера эту статью Mozilla.

Мне нужно немного изменить его, завернув последний OL в контейнер DIV с именем .foo, как показано в этом jsFiddle.

<div id='foo'>
    <ol>
      <li>item</li>          <!-- 1     -->
      <li>item</li>          <!-- 2     -->
    </ol>
</div>

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

При добавлении обертки счетчик больше не сбрасывается, а номера продолжаются с 4.1 и 4.2. Зачем? Как сбросить новый счетчик, даже если он находится внутри контейнера? Спасибо

Answer 1

Добавьте сброс счетчика в div и присвойте новое значение обернутому ol. Скрипка: http://jsfiddle.net/mbmg52sz/3/

ol{
  counter-reset: sectionA;
  list-style-type: none;
}
li::before {
  counter-increment: sectionA;
  content: counters(sectionA,".") " ";
}

div{
    counter-reset: sectionA;
}

div > ol{
    counter-reset: sectionB;
}

div > ol > li{
    counter-increment: sectionB;
    content: counters(sectionB,".") " ";
}