Counter

Traditional lists via the <ul>, <ol>, <dl> tags aren't too versatile when it comes to styling the markers. Sometimes, we have to rely on extra markup to accomplish some minimal custom styling.

CSS counters, on the other hand, take styling lists (or any element for that matter) to a whole new level of customization and styling.

Granted, CSS counters rely not only on the properties we're going to see next, but also on the content property and the :before pseudo-element.

Let's check out the properties that make CSS counters so great.

counter-reset

The counter-reset CSS property resets the counter by giving it a name, and it looks like this:

counter-reset: basic-counter;

Description

The counter-reset property serves two purposes: resets the counter and defines a name for the counter. The name is later used by the counter-increment and counter()/counters() functions that we'll see later.

I have to admit that the term "counter-reset" isn't as intuitive as it should be if it's used to set a name for the counter. Something like "counter-name" would be more suitable if you ask me.

This property supports two values: a name and a number.

We can reference multiple counter resets in the same declaration.

name

We need to give the reset counter a name. This value is required. It can be any name but it needs to adhere to the following conditions:

  • It can start with a letter, an underscore "_", or a hyphen "-"
  • It can start with a hyphen "-" character but cannot have two consecutive hyphens at the beginning of the name
  • The name cannot be just a hyphen"-"; at least one more character is required, but it can't be a number since it would be interpreted as "minus 1" (-1)
  • It cannot start with a number or a special character like #, $, !, and so on

number

It's the number that the counter is reset to. The default value is 0 (zero) if no value is declared.

This value is optional unless we want to start the list from a number different than 1. Pay close attention to this value, because the first number in the list is not the number declared in this value.

If we set the value to 1, the list starts at 2. If we leave the value empty, it defaults to 0 (zero) and the list starts at 1. Negative values are valid.

CSS:

/*Define a name and counter reset to 0*/
ul { counter-reset: basic-counter; }
/*The counter will start at 3*/
ul { counter-reset: basic-counter 2; }
/*Multiple counters in a single declaration*/
ul { counter-reset: basic-counter-A, basic-counter-B 2; }

counter-increment

The counter-increment CSS property increments the value of one or more counters, and it looks like this:

counter-increment: basic-counter 2;

Description

This property is used with the counter-reset CSS property. This is because the name specified in the counter-reset property is used in the counter-increment CSS property.

As a refresher, remember that the counter name will also be used by the counter()/counters() function.

We can declare multiple counter increments in the same declaration. Multiple counters are separated by a space. This property supports two values: A name and a number.

name

It can be any name but it needs to adhere to the following conditions:

  • It can start with a letter, an underscore "_", or a hyphen "-"
  • It can start with a hyphen "-" character but not have two consecutive hyphens at the beginning of the name
  • The name cannot be just the hyphen"-"; at least one more character is required, but it can't be a number since it would be interpreted as "minus 1" (-1).
  • It cannot start with a number or a special character like #, $, !, and so on.

number

This is the number that the counter is reset to. The default value is 0 (zero) if no value is declared. This value is optional unless we want to start the list from a number different than 1.

Now, the number value defines the amount of increments each counter will have. For example, if we declare 2, then the counter will be 2, 4, 6, and so on. If we declare 3, then the counter will be 3, 6, 9, and so on.

If we do not declare a value, the default increment will be by 1, as in 1, 2, 3, and so on.

Negative values are valid. If we declare -2, then the counter will be -2, -4, -6, and so on.

CSS:

/*First, define a name and counter reset to 0 with counter-reset*/
ul { counter-reset: basic-counter; }
/*Then, invoque the counter name and increment every element by 2 (2, 4, 6, and so on.)*/
ul li { counter-increment: basic-counter 2; }
/*Multiple counters*/
ul li { counter-increment: basic-counter 2 roman-numeral-counter; }

Here is a demo in CodePen: http://tiny.cc/css-counters

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.224.54.168