counter-reset
CSS counter-reset Property
The CSS counter-reset property is used to reset one or more counters each time the target element that it is a property of occurs on the page. This way automatic numbering can resume from the reset value you define for subsections under the target element. By default it resets to a value of 0 if you do not specify the optional integer.
For example: "counter-reset: counter1 5 counter2 10;" will reset counter1 to 5 each time the target element occurs, and reset counter2 to 10.
video tutorial : automatic numbering feature
CSS CODE EXAMPLE
<!DOCTYPE html>
<style type="text/css">
h2.myHeading { counter-reset: p_section 100; }
p.mySection::before {
content: "( " counter(p_section) " ) ";
counter-increment: p_section;
}
</style>
<h2 class="myHeading">Adventure Movies</h2>
<p class="mySection">Lord of the Rings</p>
<p class="mySection">The 13th Warrior</p>
<p class="mySection">Solomon Kane </p>
<p class="mySection">The Dark Crystal</p>
<h2 class="myHeading">Sci-Fi Movies</h2>
<p class="mySection">Star Wars</p>
<p class="mySection">The Abyss</p>
<p class="mySection">Aliens</p>
<style type="text/css">
h2.myHeading { counter-reset: p_section 100; }
p.mySection::before {
content: "( " counter(p_section) " ) ";
counter-increment: p_section;
}
</style>
<h2 class="myHeading">Adventure Movies</h2>
<p class="mySection">Lord of the Rings</p>
<p class="mySection">The 13th Warrior</p>
<p class="mySection">Solomon Kane </p>
<p class="mySection">The Dark Crystal</p>
<h2 class="myHeading">Sci-Fi Movies</h2>
<p class="mySection">Star Wars</p>
<p class="mySection">The Abyss</p>
<p class="mySection">Aliens</p>
Adventure Movies
Lord of the Rings
The 13th Warrior
Solomon Kane
The Dark Crystal
Sci-Fi Movies
Star Wars
The Abyss
Aliens
Possible Values:
Supply one or more counter names that you wish to reset, each followed by an optional integer that will control the value each counter is reset to.For example: "counter-reset: counter1 5 counter2 10;" will reset counter1 to 5 each time the target element occurs, and reset counter2 to 10.
Related Properties and Material
counter-incrementvideo tutorial : automatic numbering feature
0 Response to "counter-reset"
Post a Comment