CSS - counter-set Property

Quiz

CSS counter-set property creates a counter and sets its initial value to the specified value. A new counter is created only if a counter with that name does not already exist. If a counter with the same name exists, its value is reset to the specified value.

Syntax

counter-set: none | counter-name number | initial | inherit;

Property Values

Value	Description
none	No counter is set. Default.
counter-name number	It sets the counter name and the count value to reset the counter on each occurence of the element. If not specified default value 0 is used.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Counter Set Property

The following examples explain the counter-set property with different values.

Counter Set Property with Counter Name and Count

To create a new counter and set an intial count to it, we specify the counter name along with the initial value. The created counter can then be used for incrementing values or decrementing values. The following example shows this.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         counter-set: numcounter 0;
      }

      h3::before {
         counter-increment: numcounter;
         content: "Chapter " counter(numcounter) ". ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-set property
   </h2>
   <h3>
      Python
   </h3>
   <h3>
      Matplotlib
   </h3>
   <h3>
      Numpy
   </h3>
   <h3>
      Scipy
   </h3>
   <h3>
      Scikit-learn
   </h3>
   <h3>
      Open CV
   </h3>

</body>

</html>

Counter Set Property with Variation

The counter-set property combined with counter-increment can be used in a number of ways. In the following example, decreasing values have been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         counter-set: numcounter 7;

      }

      h3::before {
         counter-increment: numcounter -1;
         content: "Step " counter(numcounter) ". ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-set property
   </h2>
   <p>
      Decreasing values:
   </p>
   <h3>
      Delivery
   </h3>
   <h3>
      Payment
   </h3>
   <h3>
      Confirm Address
   </h3>
   <h3>
      Proceed to Checkout
   </h3>
   <h3>
      Add to Bag
   </h3>
   <h3>
      Search Item
   </h3>

</body>

</html>

Supported Browsers

Property
counter-set	85.0	85.0	68.0	Not supported	71.0

css_reference.htm

Print Page