Tutorials


CSS counter-reset property


The counter-reset property in CSS is used to initialize or reset the value of a CSS counter to a specific value. CSS counters are used to create automatic numbering for elements, such as list items in ordered lists or custom counters in other HTML elements.

Syntax

selector {
  counter-reset: counter-name [initial-value];
}
  • selector: The element to which you want to apply the counter reset.
  • counter-name: The name of the counter you want to reset.
  • initial-value: (Optional) The value to which the counter should be reset. If omitted, the counter is reset to 0.

Values

  1. counter-name:

    • Description: Specifies the name of the counter to be reset. This name must match the name used in counter-increment or other counter-related properties.

  2. initial-value (Optional):

    • Description: Specifies the value to which the counter should be reset. If not specified, the counter is reset to 0.

Usage Example

Counters are typically used with ordered lists, but they can also be applied to other elements. Here’s an example of how to use counter-reset in combination with other counter properties:

Example

/* Resetting a counter named 'section' */
body {
  counter-reset: section; /* Initializes 'section' counter to 0 */
}

h2::before {
  counter-increment: section; /* Increment 'section' counter for each h2 */
  content: "Section " counter(section) ": "; /* Display the counter value */
}

ul {
  counter-reset: list; /* Initializes 'list' counter for ul */
}

li {
  counter-increment: list; /* Increment 'list' counter for each li */
}

li::before {
  content: counter(list) ". "; /* Display the counter value for each li */
}

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Counter Reset Example</title>
  <style>
    /* Include the CSS from the example above here */
  </style>
</head>
<body>
  <h2>Introduction</h2>
  <h2>Overview</h2>
  
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>
</body>
</html>

Explanation:

  1. counter-reset: section;:

    • Initializes a counter named section to 0 for the body element. This counter will be used in the ::before pseudo-element of h2 tags.

  2. counter-increment: section;:

    • Increments the section counter by 1 for each h2 element.

  3. content: "Section " counter(section) ": ";:

    • Uses the counter(section) function to display the current value of the section counter before each h2 element.

  4. counter-reset: list;:

    • Initializes a counter named list to 0 for the ul element.

  5. counter-increment: list;:

    • Increments the list counter by 1 for each li element.

  6. content: counter(list) ". ";:

    • Uses the counter(list) function to display the current value of the list counter before each li element.

Important Points

  1. Counter Initialization:

    • counter-reset initializes the counter to a specified value (or 0 by default). This is especially useful when you need to reset counters at different sections or elements within your document.

  2. Counter Names:

    • The name of the counter in counter-reset must match the counter name used in counter-increment and other related properties to ensure consistency.

  3. Inheritance:

    • The counter-reset property does not inherit its value. It applies only to the element it is directly set on and does not affect child elements unless explicitly set.

  4. Browser Compatibility:

    • CSS counters, including properties like counter-reset, are well-supported across modern browsers, but it's always a good practice to test your design in different browsers to ensure consistent behavior.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about