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?

Brock Adams · Accepted Answer · 2011-08-18 09:17:35Z

5

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

div.primaries
{
  counter-reset: section;
}

See it work at jsfiddle/Larry/ev758/.

edited Aug 18, 2011 at 9:17

Brock Adams

94k23 gold badges242 silver badges312 bronze badges

answered Aug 18, 2011 at 8:51

Niclas Larsson

8585 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Niclas Larsson Over a year ago

From w3schools: "The counter-reset property creates or resets one or more counters."

Brock Adams Over a year ago

@elric, if this works for you, please mark it as answered.

Collectives™ on Stack Overflow

How to make css counter works with css selector?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related