CSS - Counters

Creating a Counter

To create a counter in CSS, you can use the counter-reset property. This property lets you define a new counter with a name and set its starting value.

selector {
  counter-reset: counter-name initial-value;
}

.container {
  counter-reset: my-counter 1;
}

You can also create multiple counters by separating them with commas:

.container {
  counter-reset: counter1 0, counter2 5;
}

It's important to note that the counter-reset property creates a new instance of the counter each time it is used on an element. This means that if you have multiple elements with the same counter name, each element will have its own independent counter.

Creating counters is the first step in using CSS counters. Once you have created a counter, you can increment its value and display it using other CSS properties.

Incrementing a Counter

After you create a counter using the counter-reset property, you can increase its value using the counter-increment property. This property lets you increase the value of a counter by a set amount.

selector {
  counter-increment: counter-name increment-value;
}

.item {
  counter-increment: my-counter 2;
}

You can also increase multiple counters at once by separating them with commas:

.item {
  counter-increment: counter1, counter2 3;
}

It's important to note that the counter-increment property is typically used on elements that are generated or repeated, such as list items or grid items. Each time an element with the counter-increment property is found, the specified counter will be increased by the given value.

Increasing counters allows you to keep track of the count or position of elements within a container. You can then display the counter value using the content property and the counter() function, which will be covered in the next section.

Displaying Counter Values

After creating and incrementing counters, you can display their values using the content property with the counter() function. The counter() function takes the name of the counter as a parameter and returns its current value.

selector::before {
  content: counter(counter-name);
}

• selector is the CSS selector where you want to display the counter value.
• ::before is a pseudo-element that inserts content before the selected element.
• counter(counter-name) is the counter() function that retrieves the value of the specified counter.

.item::before {
  content: "Item " counter(my-counter) ": ";
}

You can also format the counter value by passing additional parameters to the counter() function:

selector::before {
  content: counter(counter-name, counter-style);
}

• counter-style is an optional parameter that specifies the style of the counter value. It can be one of the predefined styles (decimal, lower-roman, upper-alpha, etc.) or a custom style defined using the @counter-style rule.

.item::before {
  content: counter(my-counter, upper-roman) ". ";
}

This example will display the value of my-counter using uppercase Roman numerals, followed by a dot and a space.

You can even combine multiple counters or mix text and counter values using the content property:

.item::before {
  content: "Section " counter(section-counter) ", Item " counter(item-counter);
}

This example will display the text "Section " followed by the value of section-counter, then ", Item " followed by the value of item-counter.

Nesting Counters

CSS counters let you create nested counters by using multiple counter-reset and counter-increment properties on different elements. Nesting counters is useful when you have a hierarchical structure and want to keep track of the count at each level.

To create nested counters, you can use the counter-reset property on a parent element to create a new counter, and then use counter-increment on child elements to increase the counter value. You can repeat this pattern for multiple levels of nesting.

.chapter {
  counter-reset: chapter-counter;
}

.section {
  counter-reset: section-counter;
}

.chapter h2::before {
  counter-increment: chapter-counter;
  content: "Chapter " counter(chapter-counter) ": ";
}

.section h3::before {
  counter-increment: section-counter;
  content: counter(chapter-counter) "." counter(section-counter) " ";
}

We have two levels of nesting: chapters and sections. The .chapter element creates a new counter called chapter-counter, and the .section element creates a new counter called section-counter. The h2 elements within .chapter increase the chapter-counter, while the h3 elements within .section increase the section-counter.

To display the nested counter values, you can use the counters() function instead of the counter() function. The counters() function takes the name of the counter and a string separator as parameters. It returns the values of all counters with the same name, separated by the specified string.

.section h3::before {
  content: counters(section-counter, ".") " ";
}

The counters() function displays the values of all section-counter counters, separated by a dot. This creates a hierarchical numbering system like "1.1", "1.2", "2.1", etc.

You can nest counters to multiple levels by creating counters at each level and using the counters() function to display the hierarchical counter values.

.level1 {
  counter-reset: level1-counter;
}

.level2 {
  counter-reset: level2-counter;
}

.level3 {
  counter-reset: level3-counter;
}

.level1 h1::before {
  counter-increment: level1-counter;
  content: counter(level1-counter) ". ";
}

.level2 h2::before {
  counter-increment: level2-counter;
  content: counters(level2-counter, ".") " ";
}

.level3 h3::before {
  counter-increment: level3-counter;
  content: counters(level3-counter, ".") " ";
}

We have three levels of nesting: level1, level2, and level3. Each level creates its own counter and increments it on the corresponding heading elements. The counters() function is used to display the hierarchical counter values at each level.

Nesting counters provides a way to create structured numbering systems for outlines, table of contents, or any other hierarchical content. By using multiple counters and the counters() function, you can create complex nested numbering schemes with ease.

Counter Styles

CSS provides ways to change the look of counter values. You can use predefined counter styles or make your own styles to match your design.

One way to style counter values is by using the list-style-type property. Although mainly used for styling list bullet points, it can also be used for counters. The list-style-type property accepts various predefined values that set the style of the counter marker.

ol {
  list-style-type: upper-roman;
}

This example sets the counter style to uppercase Roman numerals (I, II, III, etc.) for an ordered list.

CSS offers several predefined counter styles:

You can apply these styles to counters using the counter() function and specifying the desired style:

selector::before {
  content: counter(counter-name, lower-alpha);
}

This example displays the counter value using lowercase ASCII letters.

In addition to the predefined styles, you can make your own counter styles using the @counter-style rule. This rule lets you define the symbols, range, and other properties of a custom counter style.

@counter-style my-custom-style {
  system: cyclic;
  symbols: "\2605" "\2606";
  suffix: " ";
}

selector::before {
  content: counter(counter-name, my-custom-style);
}

This example:

• The @counter-style rule defines a custom style named my-custom-style.
• The system property sets how the style should make the marker values. cyclic means the style will cycle through the provided symbols.
• The symbols property defines the symbols to be used for the marker. Here, we use Unicode characters for a filled star (\2605) and an empty star (\2606).
• The suffix property adds a space after each marker.

To apply the custom style, you can pass the style name to the counter() function.

Custom counter styles give you flexibility in making unique and visually appealing counters that align with your website's design.

@counter-style my-custom-style {
  system: fixed;
  symbols: "Section " "." "Part ";
  suffix: ": ";
}

.section::before {
  counter-increment: section-counter;
  content: counter(section-counter, my-custom-style);
}

This example shows how to apply a custom counter style to nested counters. The custom style "my-custom-style" uses fixed symbols to make a hierarchical numbering system like "Section 1: ", "Section 1.1: ", "Section 1.Part 1: ", etc.

By combining predefined styles and custom counter styles, you can make visually appealing and meaningful counter markers that fit your website's design and content structure.

Resetting Counters

In CSS, you can reset a counter to its starting value using the counter-reset property. This is useful when you want to start the counter from a specific value at a certain point in your document or when you need to reset the counter for a new instance of an element.

To reset a counter, you can use the counter-reset property on the element where you want the counter to restart. You specify the name of the counter you want to reset and optionally provide a new value for the counter.

selector {
  counter-reset: counter-name reset-value;
}

• selector is the CSS selector where you want to reset the counter.
• counter-name is the name of the counter you want to reset.
• reset-value is an optional parameter that sets the new value for the counter. If not provided, the counter will be reset to its default initial value (usually 0).

Here are some scenarios where resetting counters is commonly used:

.section {
  counter-reset: section-counter;
}

.section h2::before {
  counter-increment: section-counter;
  content: "Section " counter(section-counter) ": ";
}

.chapter {
  counter-reset: chapter-counter;
}

.section {
  counter-reset: section-counter;
}

.chapter h2::before {
  counter-increment: chapter-counter;
  content: "Chapter " counter(chapter-counter) ": ";
}

.section h3::before {
  counter-increment: section-counter;
  content: counter(chapter-counter) "." counter(section-counter) " ";
}

.grid-item {
  counter-reset: item-counter;
}

.grid-item::before {
  counter-increment: item-counter;
  content: "Item " counter(item-counter) ": ";
}