A Detailed Explanation of Counters (counter) in CSS

Description
CSS counters are a powerful tool that allows developers to automatically number elements using CSS (rather than HTML or JavaScript), such as generating table of contents, figure captions, or step indicators. They are essentially variables maintained and incremented by CSS.

Detailed Explanation

1. Core Properties of Counters
   The counter system relies on three main properties working together:

   • counter-reset: Initializes or resets one or more counters. Can set an initial value (default is 0).
   • counter-increment: Increments the value of one or more counters. Can set an increment step (default is 1).
   • counter() / counters() functions: Called within the content property to display the current value of a counter.

2. Basic Steps for Usage

   Step 1: Initialize the Counter (counter-reset)
   You need to initialize the counter on a parent element. This is equivalent to "declaring" a variable and giving it a starting value.

   body {
     counter-reset: section; /* Initialize a counter named 'section' with an initial value of 0 */
   }
   

   You can also set a specific initial value:

   body {
     counter-reset: chapter 4; /* The 'chapter' counter starts counting from 4 */
   }
   

   Step 2: Increment the Counter (counter-increment)
   Increment this counter on the elements you want to count. Typically, this is done on selectors (like h2, li).

   h2 {
     counter-increment: section; /* Whenever an <h2> element is encountered, the 'section' counter increases by 1 */
   }
   

   You can also specify the increment step:

   h2 {
     counter-increment: section 2; /* Each time an <h2> is encountered, the counter increases by 2 */
   }
   

   Step 3: Display the Counter (content + counter())
   Finally, use the content property and the counter() function to display the counter's value. This is usually done within the target element's pseudo-elements (like ::before or ::after).

   h2::before {
     content: "Section " counter(section) ": "; /* Displays as "Section 1: " */
   }
   

   The counter() function can accept a second parameter to specify the number style (e.g., decimal (decimal, default), upper-roman (uppercase Roman numerals), lower-alpha (lowercase letters), etc.).

   h2::before {
     content: counter(section, upper-roman) ". "; /* Displays as "I. " */
   }
   

3. Nested Counters (counters())
   For multi-level nested lists (like ol>li>ol>li), the counters() function is very useful. It concatenates all parent counter values.

   Step 1: Reset the counter for each level of the list

   ol {
     counter-reset: ordered-list; /* Initialize a counter for each <ol> element */
     list-style-type: none; /* Remove default list markers */
   }
   

   Step 2: Increment and display the counter

   li::before {
     counter-increment: ordered-list; /* Increment the counter */
     content: counters(ordered-list, ".") " "; /* Use the counters() function with '.' as the separator */
   }
   

   • The counters(name, string) function generates a string composed of the current values of all same-name counters in the hierarchy, connected by the specified string (e.g., ".").
   • For example, a third-level nested list item would display as "1.2.3".

4. Practical Example: Automatic Numbering for Headings and Subheadings

   HTML Structure

   <h1>Start Learning CSS Counters</h1>
   <h2>What are Counters?</h2>
   <h3>counter-reset</h3>
   <h3>counter-increment</h3>
   <h2>How to Use Counters?</h2>
   <h3>Basic Steps</h3>
   <h2>Advanced Usage</h2>
   <h3>Nested Counters</h3>
   

   CSS Code

   body {
     counter-reset: h2-counter; /* Initialize the main counter for h2-level headings */
   }
   
   h2 {
     counter-reset: h3-counter; /* Under each h2, reset the sub-counter for h3-level subheadings */
     counter-increment: h2-counter; /* When encountering an h2, the main counter increments by 1 */
   }
   
   h2::before {
     content: counter(h2-counter) ". "; /* Display the main counter, e.g., "1. " */
   }
   
   h3 {
     counter-increment: h3-counter; /* When encountering an h3, the sub-counter increments by 1 */
   }
   
   h3::before {
     content: counter(h2-counter) "." counter(h3-counter) " "; /* Display as "main-counter.sub-counter", e.g., "1.1 " */
   }
   

   Final Result

   • "What are Counters?" displays as: 1. What are Counters?
   • "counter-reset" under it displays as: 1.1 counter-reset
   • "How to Use Counters?" displays as: 2. How to Use Counters?
   • "Basic Steps" under it displays as: 2.1 Basic Steps

Summary
CSS counters, through the clever combination of counter-reset, counter-increment, and counter()/counters(), achieve pure CSS content numbering. They are particularly suitable for scenarios requiring dynamic, structured numbering, enhancing the separation of style and content, and are a practical and powerful feature in CSS.