Normally, you can renumber an HTML ordered list. You use the attribute “start” to set the value you want to restart the numbers at. What happens when you have a special style that overrides how the numbers are generated?

Restart Number Lists with CSS

Image by Alicja from Pixabay

For example, I use the following CSS style to override how a list looks.

ol.simple-list {
	counter-reset: li-counter;
	list-style-type: none;
	list-style-type: decimal !ie;
	margin: 0;
	margin-left: 3em;
	padding: 0;
}


It creates a list with numbers like this.

Green Numbered List

When I tried to use the start attribute to restart numbering a list, it set all of the numbers to 1. I tried to update the style with newer CSS styling. It didn’t fix the problem. Finally, I found the right way to make this work. The attribute “counter-increment” lets you reset the counter. You have to pick a number one less than what you want to start at.

.simple-list-counter-9 {
	counter-increment: li-counter 9;
}

By doing this, you can restart your list at the desired number. With the above style the new list starts at 10 instead of 1. This works if all your lists end at number 9. If you want to restart at a different style, I suggest using an in-line style instead of adding it to your CSS file.