About counter-reset

why cant we declare counter-reset on h2 tag where we defined h2 since we are incrementing h2. I tried to insert counter-reset in h2 where I got every h2 element numbered with 1.

<!DOCTYPE html>
body {
    counter-reset: section 0;
h2 {

    counter-increment: section 1;

h2::before {
    content: "Section " counter(section) ": ";

<h1>Using CSS Counters:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>


Because that would reset the counter on every h2 and thus never get incremented (as you found out).:slight_smile:

The counter reset property is set on an ancestor or sibling of the element in order for the element you choose to start incrementing.


ok I figured it out now :+1:


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.