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.