CODEWITHSUNDEEP
css
kev1807
kev1807

Reputation: 87

CSS Counter continues counting in Firefox

I have a problem with CSS counters once again! In chrome the counter works without problems, in firefox it has trouble counting correctly!

body {
  counter-reset: head2 head3 head4 head5 head6;
}

h2.heading:before {
  counter-increment: head2;
  content: counter(head2) ". ";
}

h2.heading {
  counter-reset: head3 head4 head5 head6;
}

h3.heading:before {
  counter-increment: head3;
  content: counter(head2) "."counter(head3) " ";
}

h3.heading {
  counter-reset: head4 head5 head6;
}

h4.heading:before {
  counter-increment: head4;
  content: counter(head2)"."counter(head3)"."counter(head4)" ";
}

h4.heading {
  counter-reset: head5 head6;
}

h5.heading:before {
  counter-increment: head5;
  content: counter(head2)"."counter(head3)"."counter(head4)"."counter(head5)" ";
}

h5.heading {
  counter-reset: head6;
}

h6.heading:before {
  counter-increment: head6;
  content: counter(head2)"."counter(head3)"."counter(head4)"."counter(head5)" ."counter(head6)" ";
}
<h1>Test Counter</h1>
<h2 class="heading">1</h2>
<h3 class="heading">Test 1</h3>
<h4 class="heading">Test 4</h4>
<h4 class="heading">1.1.2</h4>
<h4 class="heading">1.1.3</h4>
<h5 class="heading">Test 5</h5>
<h3 class="heading">Test 1</h3>
<h3 class="heading">1.3</h3>
<h4 class="heading">1.3.1</h4>
<h2 class="heading">2</h2>
<h3 class="heading">Test2</h3>
<h4 class="heading">test 4</h4>
<h2 class="heading">3</h2>
<h3 class="heading">Test3</h3>
<h4 class="heading">Test 4</h4>
<h5 class="heading">whop</h5>
<h5 class="heading">whap</h5>
<h3 class="heading">Test3</h3>
<h3 class="heading">Test3</h3>
<h3 class="heading">Test3</h3>
<h4 class="heading">Test-whoops</h4>
<h5 class="heading">Test 5 asdasd</h5>
<h5 class="heading">Test 5</h5>
<h5 class="heading">Test 5</h5>
<h3 class="heading">Test3</h3>
<h3 class="heading">Test3</h3>
<h2 class="heading">4</h2>

In Chrome the output looks fine: enter image description here

while in Firefox the output behaves weird: enter image description here

The behaviour that I wish is obviously the Chrome one! Can anyone give me a hint?

Upvotes: 2

Views: 156

Answers (1)

Yaroslav Trach
Yaroslav Trach

Reputation: 2011

Remove counter reset from body rule for head3 head4 head5 head6.

Same code example in Codepen.io

body {
  counter-reset: head2;
}

h2.heading:before {
  counter-increment: head2;
  content: counter(head2) ". ";
}

h2.heading {
  counter-reset: head3 head4 head5 head6;
}

h3.heading:before {
  counter-increment: head3;
  content: counter(head2) "."counter(head3) " ";
}

h3.heading {
  counter-reset: head4 head5 head6;
}

h4.heading:before {
  counter-increment: head4;
  content: counter(head2)"."counter(head3)"."counter(head4)" ";
}

h4.heading {
  counter-reset: head5 head6;
}

h5.heading:before {
  counter-increment: head5;
  content: counter(head2)"."counter(head3)"."counter(head4)"."counter(head5)" ";
}

h5.heading {
  counter-reset: head6;
}

h6.heading:before {
  counter-increment: head6;
  content: counter(head2)"."counter(head3)"."counter(head4)"."counter(head5)" ."counter(head6)" ";
}
<h1>Test Counter</h1>
<h2 class="heading">1</h2>
<h3 class="heading">Test 1</h3>
<h4 class="heading">Test 4</h4>
<h4 class="heading">1.1.2</h4>
<h4 class="heading">1.1.3</h4>
<h5 class="heading">Test 5</h5>
<h3 class="heading">Test 1</h3>
<h3 class="heading">1.3</h3>
<h4 class="heading">1.3.1</h4>
<h2 class="heading">2</h2>
<h3 class="heading">Test2</h3>
<h4 class="heading">test 4</h4>
<h2 class="heading">3</h2>
<h3 class="heading">Test3</h3>
<h4 class="heading">Test 4</h4>
<h5 class="heading">whop</h5>
<h5 class="heading">whap</h5>
<h3 class="heading">Test3</h3>
<h3 class="heading">Test3</h3>
<h3 class="heading">Test3</h3>
<h4 class="heading">Test-whoops</h4>
<h5 class="heading">Test 5 asdasd</h5>
<h5 class="heading">Test 5</h5>
<h5 class="heading">Test 5</h5>
<h3 class="heading">Test3</h3>
<h3 class="heading">Test3</h3>
<h2 class="heading">4</h2>

Upvotes: 2

Related Questions