Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
- [Chris] Hi, this is Chris Converse and in this episode, we'll take a series of separate, ordered lists and continue the numbering using CSS. This way if we add or remove list items, the numbering doesn't have to be manually reset in the HTML file. So if you'd like to follow along, download the exercise files and begin by opening the HTML file in your favorite text editor. Now when you have the HTML file open, if you scroll down inside of the body area, you'll see that we have a series of ordered lists. We have the first one here, the second one here, and the third one here. If you look at this page in a browser, you'll notice that each time we start an ordered list, the numbering starts again.
So this is one, two, three. Then it starts again with one, two, three. And then the third set starts with one and goes to eight. So if we wanted to continue the numbering, in HTML we would do something like this. If I come here to the beginning tag of this second ordered list, I could add a start attribute here and set this equal to, and put the number four. And then save my HTML file and in the browser, we'll see that this second list starts with the number four. So it goes four, five, and six. However, what I want to do is have it so that all of these individual ordered lists will continue counting without having to modify the HTML.
So let's come back to the HTML. Let's remove that start property on the second ordered list. Let's come up to the first ordered list. And let's come here and add a class. I'll set a class equal to begin. Then for the second ordered list, let's come in here and add another class. We're going to set this one to continue. Then we'll come here and copy this and apply that same class to the third ordered list.
Then let's save our HTML file. Let's go back to the exercise files, and let's open up style.css in our text editor. And so now in our CSS file, let's scroll down. The first thing that we'll do is we'll remove the numbers. So after the rule that targets the O-L or the ordered list. Let's hit a few returns. Let's type O-L, space, L-I. We're going to target the list items. Put in our brackets. Let's come in here and set a list style type property to none.
Save your CSS. You'll see all the numbers disappear in the browser. Next, let's target the ordered list with a class of begin. So ol.begin. Put in our brackets. Let's split this open. And let's add a property called counter-reset, and we're going to give this a name. So we'll call this myCounter, then a semicolon. And now after this rule, let's hit a few returns.
And we're going to add the numbers back in using pseudo elements. And we're going to target both of the ordered lists. So let's start with ol.begin. Then a space. Then we'll type L-I. Then two colons. Then the word before, then a comma. Then on the next line, we'll target the ordered list with a class of continue. So ol.continue. Space, L-I, two colons, then before.
Let's add in our brackets. And the first property we'll set inside of here will be content. So we'll set content, colon, space. Then we'll set a counter value. Beginning and ending parentheses, then a semicolon. Inside of the my counter parentheses, we're going to put the name of the counter we defined up here on the ol.begin rule. Come in here and select the myCounter name. Let's paste it down here inside of the parentheses. And then at this point if we hit save and go back to the browser, we'll now see that we have zero showing up in front of all the different list items.
Now I want to have a period and space after the number. So after the parentheses but before the semicolon in the content value, I'll hit a space. I'll put two tick marks for a string. Then inside the string, I'll type a period then a space. I'll hit save again, and we'll now see zero, period, space before all of the items. Now to get these to count, let's go back to the CSS. Let's set a counter-increment property, so counter, dash, increment, colon, space, and we're going to us the myCounter name. So let's come in here and copy that again.
Let's paste it on this line and hit a semicolon. So with that in place, save your CSS. Go back to the browser. You'll now see that our separated ordered lists are now hooked together with CSS. Now if you'd like to continue working with numbered lists, check out this course on styling numbered lists which is also available here in the library. And so with that, I'll conclude this episode. And as always, thanks for watching.
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.