counter-increment
CSS counter-increment Property
The CSS counter-increment property is used to change the value of one or more counters incrementally. You can give this property an optional integer that will control the increment factor. By default it increments by a value of 1 if you do not specify the optional integer. CSS sports an automatic numbering feature that uses a counter() function and the counter-increment/counter-reset properties to establish automatic numbering of elements in a web document.
For example: "counter-increment: counter1 5 counter2 10;" will increment counter1 by 5 , and increment counter2 by 10.
video tutorial : automatic numbering feature
CSS CODE EXAMPLE
<!DOCTYPE html>
<style type="text/css">
h2.myHeading { counter-reset: p_section; }
p.mySection::before {
content: "( " counter(p_section) " ) ";
counter-increment: p_section 1;
}
</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; }
p.mySection::before {
content: "( " counter(p_section) " ) ";
counter-increment: p_section 1;
}
</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 increment, each followed by an optional integer that will control the increment factor for each.For example: "counter-increment: counter1 5 counter2 10;" will increment counter1 by 5 , and increment counter2 by 10.
Related Properties and Material
counter-resetvideo tutorial : automatic numbering feature
0 Response to "counter-increment"
Post a Comment