Using CSS Counters

Question

How can I count a element if each of them is nested in a sepereate element ?

    .variant--name::before {
      counter-increment: section;
      content: "Abschnitt " counter(section) ": ";
    }

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

Nenad Vracar · Accepted Answer · 2016-04-12 19:31:44Z

5

You also need counter-reset

body {
  counter-reset: section;
}
.variant--name::before {
  counter-increment: section;
  content: "Abschnitt " counter(section)": ";
}

<div class="variant--group">
  <h3 class="variant--name">variant</h3>
</div>
<div class="variant--group">
  <h3 class="variant--name">variant</h3>
</div>
<div class="variant--group">
  <h3 class="variant--name">variant</h3>
</div>

Edit: You can create parent element and use counter-reset on it, so now for every parent element you create new instance of counter Fiddle instead of resetting counter on body Fiddle

edited Apr 12, 2016 at 19:31

answered Apr 12, 2016 at 19:05

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

Collectives™ on Stack Overflow

Using CSS Counters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related