Search PI
Programming Infinity
Programming in a way to understand
Featured to Learn
- Get link
- Other Apps
CSS counter-increment Property
Example
Create a counter ("my-sec-counter") and increase it by one for each occurrence of the <h2> selector:
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment: my-sec-counter;
content: "Section " counter(my-sec-counter) ". ";
}
Definition and Usage
The counter-increment
property increases or decreases the value of one or more CSS counters.
The counter-increment
property is usually used together with the counter-reset
(creates counter and assigns some value to it) property and the content
property.
Default value: | none |
---|---|
Inherited: | no |
Animatable: | no. |
Version: | CSS2 |
JavaScript syntax: | object.style.counterIncrement = "subsection"; |
- Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
- object - object in javascript means the element on which
counter-increment
is applied. - Animatable - "Animatable = no" means that it cannot be animated with CSS
@keyframes
.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS Syntax
Property Values
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | 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. |
More Examples
Example
Create a counter ("my-sec-counter") and decrease it by one for each occurrence of the <h2> selector:
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment: my-sec-counter -1;
content: "Section " counter(my-sec-counter) ". ";
}
Example
Numbering sections and sub-sections with "Section 1:", "1.1", "1.2", etc.:
/* Set "section" to 0 */
counter-reset: section;
}
h1 {
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before {
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Example
Create a counter and increase it by one (using Roman numerals) for each occurrence of the <h2> selector:
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment: my-sec-counter;
content: counter(my-sec-counter, upper-roman) ". ";
}
- Get link
- Other Apps
Most Reads
Thunkable #2 - How to show Admob Banner and Interestial Ads using Thunkable
- Get link
- Other Apps
Thunkable #4 - Introduction to advanced features | Webview Explanation
- Get link
- Other Apps
Thunkable #6 - Text Input and Label of User Interface full and simple explanation with use
- Get link
- Other Apps
How to use Switch in Thunkable | Designer and Blocks Clear Explanation
- Get link
- Other Apps
HTML #11 - Tables in HTML and it's properties #part1
- Get link
- Other Apps
How to use Alert in Thunkable | Designer and Blocks clear explanation
- Get link
- Other Apps
Android #11 - ScrollView | Adding Relative Layout to ScrollView | Calendar #3
- Get link
- Other Apps
HTML #9 - HTML Images and it's attributes Introduction, Uses and How to use
- Get link
- Other Apps
HTML #8 - HTML Text Formatting, Uses and How to Use
- Get link
- Other Apps
Android Studio #2 - Button's Introduction and uses
- Get link
- Other Apps
Comments
Post a Comment