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
- [Instructor] Hi, this is Chris Converse, and in this episode, we'll use CSS to count specific items in our webpage in order to dynamically count them without having to manually update our HTML. So if you'd like to follow along, download the exercise files, and we'll begin by opening the HTML file in a text editor. Now once you have the HTML file open, if we scroll down here, we'll see that inside of an article element, we have a series of figures. So here's the first figure here. This one has an id of bowl_1.
Scroll down, here's bowl_2, and then bowl_3. And inside of each figure, we have a figcaption. Now over in the preview area here, we can see the individual bowls, and we can see the figcaption content underneath. So here's items one, two and three. So to begin counting these automatically with CSS, let's go back to the exercise files. Let's find style.css. Let's open this in our text editor. Let's scroll down to the bottom. Let's find the rule that selects figcaption, and the first thing we'll do is come in here, after the padding property.
Let's come in here and set a counter-increment property. So counter dash increment, and we're going to give this a name. We'll call this myFigures, then a semicolon. So now with our counter-increment defined on figcaption, now we're going to add a pseudo-element so we can put the word figure, and the number of the count, inside of each different figcaption. So I'll type figcaption, two colons, then the word before. So we're going to add some HTML before each figure caption content.
Split this open. First property's going to be content, colon space. Inside of a string, we're going to type the word Figure, and a space, then outside of the string, we'll type in counter, put in our parentheses and a semicolon, and then come up here and copy the myFigures name. Let's paste that inside of the parentheses. Next let's add a few more properties to style the text. For color, we're going to set this to a medium gray.
So we'll use the pound sign and three sixes. Next we're going to set the font-style. We're going to set this to italic. And to make sure that each pseudo-element is on its own line, we'll come in here and set a display property. We're going to set this to block. And then finally, we're going to set a margin-bottom property of five pixels. And now to make sure that each figure caption doesn't change, or reset the count, we're going to scroll up and find the article selector, right here, and we're going to set the counter-reset at the article level.
This way, again, each figure caption inside of the article won't reset the counter. So inside of article, we're going to set counter dash reset, and then we're going to paste in the myFigures name. Add a semicolon, save your CSS. Now over here in the browser, you'll see that we have our pseudo-element typing the word Figure and a space, and then the counter-increment putting in the number. So we can see number one, number two, and then if we scroll down to the bottom, we'll see number three.
So by adding a counter-increment property to the figcaption elements, then the pseudo-element that references that custom counter, CSS can count all of the elements in our page. And so now if you'd like to dive a little deeper into CSS counters, check out Using Counters and Resets in CSS, 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.