- [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.