CSS counter-set Property
The counter-set property in CSS asserts a CSS counter to a specified value. This property manipulates the value of the existing counters and it will only create new counters if there is no counter of the given name on the element. The counter-set property is specified as one of these values: custom-ident or none.
Note: The value of the counter may be incremented or decremented using the counter-increment CSS property.
Syntax for counter-set Property:
Following is the syntax for the counter-set property.
counter-set: none|name number|initial|inherit;
CSS counter-set property values:
Let's see what values this property can have and what do those values do:
| Value |
Description |
| custom-ident |
This value refers to the name of the counter to be set. |
| integer |
This value sets the counter to each of the occurrences of the element. |
| none |
In this case, no counter set is performed. |
Example 1: CSS counter-set Property
Here in the example below, we are using the counter-set property with a different table or cell border colors, border styles, and their different values. In this case, we have given the counter-set of the text as chapter section 1 page. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Counter-set property in CSS</title>
<style type="text/css">
div{
background-color: orange;
color: black;
counter-set: chapter section 1 page;
}
</style>
</head>
<body>
<div>Study Tonight is the best platform to learn digital in a simplified way This is a bunch of texts. The text is equally distributed over the columns.</div>
</body>
</html>
Output:
Example 2: CSS counter-set Property
Here in the example below, we are using the counter-set property with a different table or cell border colors, border styles, and their different values. In this case, we have given the counter-set of the text as inherit. The CSS styling is done inside the opening and closing head tags of the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Counter-set property in CSS</title>
<style type="text/css">
div{
background-color: yellow;
color: red;
counter-set: inherit;
}
</style>
</head>
<body>
<div>Study Tonight is the best platform to learn digital in a simplified way This is a bunch of texts. The text is equally distributed over the columns.</div>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
85 |
85 |
| Edge |
85 |
85 |
| Firefox |
68 |
68 |
| Internet Explorer |
no |
no |
| Opera |
71 |
71 |
| Safari |
no |
no |
| Webview Android |
85 |
85 |
| Chrome Android |
85 |
85 |
| Firefox Android |
68 |
68 |
| Opera Android |
60 |
60 |
| IOS Safari |
no |
no |
| Samsung Internet |
no |
no |
Conclusion
The initial value for the counter-set property in CSS is none. This property is applicable to all elements. It is not an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
