About counter-reset

HTML & CSS
1

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>
<html>
<head>
<style> 
body {
    counter-reset: section 0;
}
h2 {

    counter-increment: section 1;
}

h2::before {
    content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<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>

</body>
</html>
2

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.

6 Likes
4

ok I figured it out now :+1:

3 Likes
5

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