The element
ol
it helps us, in HTML, to create ordered lists. That is, the elements are preceded by a number that indicates their order. Assigning the number 1 to the first element in the list. In this case we are going to see how we can modify the starting number of a list with CSS.
In the first versions of HTML, through an attribute we could modify the start value of the list. It was later declared obsolete and assigned to the language CSS said purpose.
To be able to modify the start number of a list with CSS we will have to use the counter properties
counter-reset
and
counter-increment
about the element
ol
.
That is why within our website we will define this style. To do this we use the
style
where we will define this style on the element
ol
.
ol { ... }
The properties
counter-reset
and
counter-increment
They are directly linked and both must appear in the definition of styles to be able to carry out our task.
counter-reset
serves to define the counter, as well as its initial value. Its syntax will be the following:
counter-reset: counterid [integer]
By default the counters are initialized to 1. That is why the value of the integer (positive or negative) will allow us to modify the value. In this way, if we want to start with number 3 in the list, we will have to increase it by 2. Leaving us with the following code:
ol {
counter-reset: item 2;
}
The counter name can be any identifier.
But as we have already said before, it is not enough for us to just initialize the counter. Otherwise, you must indicate where it is used and when it increases.
Content
, is the property that helps us indicate the content that goes into an element. In this case in the element
li
., which represents each of the items in the list. To dump the content of the counter we use the function counter(idcounter).
In this case the code will look like this:
li:before {
content: counter(item) ". "
}
It should be noted that we use the pseudo-element
before
, which indicates that the content is applied in front of the tag. And as you can see, not only is the value of the content added, but a point is also added.
The next thing will be to indicate when the counter is incremented. In this case it is also done on the element
li
. To do this we use the property
counter-increment
, to which the identifier of the counter that must be incremented and, if necessary, the increment values are passed as a value.
The syntax of
counter-increment
is as follows:
counter-increment: counterid [integer]
Finally we have the following code on the element
li
:
li:before {
content: counter(item) ". "
counter-increment: item;
}
Now we will only have to add our ordered list to the web page, to see the result of the style:
<ol> <li>First element</li> <li>Second element</li> <li>Third element</li> <li>Fourth element</li> <li>Fifth element</li> </ol>
In this way we can verify that the First Element really begins with the number 3 and thus we will have managed to modify the starting number of a list with CSS.