How to make css counter works with css selector?

Question

I'was trying to use css counter... This is my css code:

div.primaries div.entries>div.meaning:first-child:before {
    counter-increment: section;
    content: counter(section);
}

and the part of html

<div class="primaries">
<div class="headword entries">
<div class="meaning terms">
<span class="meaning terms text">A collection of items of the ...</span>
</div>
<div class="meaning entries">
<div class="example terms">
<span class="example terms text">an arms <em>cache</em></span>
</div>
</div>
<div class="meaning entries">
<div class="example terms">
<span class="example terms text">a <em>cache</em> of gold coins</span>
</div>
</div>
</div>
<div class="headword entries">
<div class="meaning terms">
<span class="meaning terms text">A hidden or inaccessible ...</span>
</div>
</div>
<div class="headword entries">
<div class="meaning terms">
<span class="meaning terms text">An auxiliary memory from ...</span>
</div>
</div>
</div>

I did not use any "counter-reset". However, every number outputed was 1. So, why it is always 1?

Answer 1

Add this and I think it will do as you will:

div.primaries
{
  counter-reset: section;
}

See it work at jsfiddle/Larry/ev758/.