From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Numbering items

Numbering items - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Numbering items

“

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

Contents