CSS counter-set Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The counter-set property in CSS is used to initialize or reset a counter to a specific value.

Counters in CSS are useful for numbering elements, such as lists, sections, and other content that requires ordered numbering.

This property allows you to control the starting point or reset the count within a document.

💡 Syntax

The syntax for the counter-set property is straightforward. It takes one or more counter names and optional integer values.

Syntax

Copied

element {
  counter-set: counter-name value;
}

Here, counter-name is the name of the counter to be set, and value is an optional integer that specifies the new value for the counter. If value is not specified, the counter is set to 0.

🎛️ Default Value

The default value of the counter-set property is an empty string, meaning no counter is set by default.

🏠 Property Values

Value	Description
counter-name	The name of the counter you want to set or reset.
value	An optional integer value to set the counter to. If omitted, the counter is set to 0.

📄 Example

In this example, we'll use the counter-set property to initialize a counter named section and use it to number sections in a document.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS counter-set Example</title>
  <style>
    body {
      counter-reset: section; /* Initialize the counter */
    }
    h2::before {
      counter-increment: section; /* Increment the counter */
      content: "Section " counter(section) ": "; /* Display the counter */
    }
    .reset-counter {
      counter-set: section 1; /* Reset the counter to 1 */
    }
  </style>
</head>
<body>
  <h2>Introduction</h2>
  <p>This is the introduction section.</p>
  
  <h2>Details</h2>
  <p>This is the details section.</p>
  
  <div class="reset-counter">
    <h2>Reset Section</h2>
    <p>This section has the counter reset to 1.</p>
  </div>
  
  <h2>Conclusion</h2>
  <p>This is the conclusion section.</p>
</body>
</html>

🖥️ Browser Compatibility

The counter-set property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The counter-set property is a powerful tool for managing and displaying ordered content on your web pages.

By initializing or resetting counters, you can create complex numbering schemes that enhance the structure and readability of your documents. Experiment with different counter values and see how this property can be used to improve your web projects.