CSS properties - counter-related

revision:

Content

counter-increment property counter-reset property

counter-increment property

top

- increases or decreases the value of one or more CSS counters.

The counter-increment property is usually used together with the "counter-reset property" and the "content property".

CSS syntax : counter-increment: none | id | initial | inherit;;

Property values:

none : default value. No counters will be incremented

id : the "id" defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If "id" refers to a counter that has not been initialized by counter-reset, the default initial value is 0

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.counterIncrement="subsection"

example: counter-increment property

HTML Tutorial

CSS Tutorial

JavaScript Tutorial

Bootstrap Tutorial

SQL Tutorial

PHP Tutorial


HTML Tutorial

CSS Tutorial

JavaScript Tutorial

Bootstrap Tutorial

SQL Tutorial

PHP Tutorial

code: 
                    <div>
                        <div class="Div-A">
                            <h4>HTML Tutorial</h4>
                            <h4>CSS Tutorial</h4>
                            <h4>JavaScript Tutorial</h4>
                            <h4>Bootstrap Tutorial</h4>
                            <h4>SQL Tutorial</h4>
                            <h4>PHP Tutorial</h4>
                        </div><BR>
                        <div class="Div-B">
                            <h4>HTML Tutorial</h4>
                            <h4>CSS Tutorial</h4>
                            <h4>JavaScript Tutorial</h4>
                            <h4>Bootstrap Tutorial</h4>
                            <h4>SQL Tutorial</h4>
                            <h4>PHP Tutorial</h4>
                        </div>
                    </div>
                    <style>
                        .Div-A { /* Set "my-sec-counter" to 0 */ counter-reset: my-sec-counter;}
                        .Div-A h4::before {/* Increment "my-sec-counter" by 1 */ counter-increment: my-sec-counter; 
                        content: "Section " counter(my-sec-counter) ". ";}
                        .Div-B { /* Set "my-sec-counter" to 0 */ counter-reset: my-sec-counter;}
                        .Div-B h4::before {/* Decrement "my-sec-counter" by 1 */ counter-increment: my-sec-counter -1; 
                        content: "Section " counter(my-sec-counter) ". ";}
                    </style>

counter-reset property

top

- creates or resets one or more CSS counters.

The counter-reset property is usually used together with the "counter-increment property" and the "content property".

CSS syntax : counter-reset: none | name number | initial | inherit;;

Property values:

none : default value. No counters will be set

id number : the "id" defines which counter to reset. The number sets the value the counter is reset to on each occurrence of the selector. The default number value is 0

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.counterReset="section"

example: counter-reset property

HTML Tutorial

CSS Tutorial

JavaScript Tutorial

Bootstrap Tutorial

SQL Tutorial

PHP Tutorial


HTML Tutorial

CSS Tutorial

JavaScript Tutorial

Bootstrap Tutorial

SQL Tutorial

PHP Tutorial

code: 
                <div>
                    <div class="Div-C">
                        <h4>HTML Tutorial</h4>
                        <h4>CSS Tutorial</h4>
                        <h4>JavaScript Tutorial</h4>
                        <h4>Bootstrap Tutorial</h4>
                        <h4>SQL Tutorial</h4>
                        <h4>PHP Tutorial</h4>
                    </div><BR>
                    <div class="Div-D">
                        <h4>HTML Tutorial</h4>
                        <h4>CSS Tutorial</h4>
                        <h4>JavaScript Tutorial</h4>
                        <h4>Bootstrap Tutorial</h4>
                        <h4>SQL Tutorial</h4>
                        <h4>PHP Tutorial</h4>
                    </div>
                </div>
                <style>
                    .Div-C { /* Set "my-sec-counter" to 0 */ counter-reset: my-sec-counter;}
                    .Div-C h4::before {/* Increment "my-sec-counter" by 1 */ counter-increment: my-sec-counter; 
                    content: "Section " counter(my-sec-counter) ". ";}
                    .Div-D { /* Set "my-sec-counter" to 0 */ counter-reset: my-sec-counter;}
                    .Div-D h4::before {/* Decrement "my-sec-counter" by 1 */ counter-increment: my-sec-counter -1; 
                    content: "Section " counter(my-sec-counter) ". ";}
                </style>