1 00:00:02.01 --> 00:00:03.04 - [Instructor] Hi, this is Chris Converse, 2 00:00:03.04 --> 00:00:05.02 and in this episode, we'll use CSS 3 00:00:05.02 --> 00:00:07.07 to count specific items in our webpage 4 00:00:07.07 --> 00:00:09.06 in order to dynamically count them 5 00:00:09.06 --> 00:00:12.06 without having to manually update our HTML. 6 00:00:12.06 --> 00:00:13.09 So if you'd like to follow along, 7 00:00:13.09 --> 00:00:15.09 download the exercise files, and we'll begin 8 00:00:15.09 --> 00:00:20.02 by opening the HTML file in a text editor. 9 00:00:20.02 --> 00:00:21.07 Now once you have the HTML file open, 10 00:00:21.07 --> 00:00:24.00 if we scroll down here, 11 00:00:24.00 --> 00:00:25.06 we'll see that inside of an article element, 12 00:00:25.06 --> 00:00:27.03 we have a series of figures. 13 00:00:27.03 --> 00:00:29.01 So here's the first figure here. 14 00:00:29.01 --> 00:00:32.03 This one has an id of bowl_1. 15 00:00:32.03 --> 00:00:36.09 Scroll down, here's bowl_2, and then bowl_3. 16 00:00:36.09 --> 00:00:39.09 And inside of each figure, we have a figcaption. 17 00:00:39.09 --> 00:00:41.08 Now over in the preview area here, 18 00:00:41.08 --> 00:00:44.01 we can see the individual bowls, 19 00:00:44.01 --> 00:00:46.09 and we can see the figcaption content underneath. 20 00:00:46.09 --> 00:00:49.06 So here's items one, two and three. 21 00:00:49.06 --> 00:00:52.03 So to begin counting these automatically with CSS, 22 00:00:52.03 --> 00:00:54.03 let's go back to the exercise files. 23 00:00:54.03 --> 00:00:56.03 Let's find style.css. 24 00:00:56.03 --> 00:00:59.04 Let's open this in our text editor. 25 00:00:59.04 --> 00:01:01.05 Let's scroll down to the bottom. 26 00:01:01.05 --> 00:01:04.06 Let's find the rule that selects figcaption, 27 00:01:04.06 --> 00:01:06.03 and the first thing we'll do is come in here, 28 00:01:06.03 --> 00:01:08.02 after the padding property. 29 00:01:08.02 --> 00:01:11.08 Let's come in here and set a counter-increment property. 30 00:01:11.08 --> 00:01:13.09 So counter dash increment, 31 00:01:13.09 --> 00:01:15.06 and we're going to give this a name. 32 00:01:15.06 --> 00:01:20.01 We'll call this myFigures, then a semicolon. 33 00:01:20.01 --> 00:01:22.08 So now with our counter-increment defined on figcaption, 34 00:01:22.08 --> 00:01:24.04 now we're going to add a pseudo-element 35 00:01:24.04 --> 00:01:28.04 so we can put the word figure, and the number of the count, 36 00:01:28.04 --> 00:01:32.04 inside of each different figcaption. 37 00:01:32.04 --> 00:01:34.08 So I'll type figcaption, two colons, 38 00:01:34.08 --> 00:01:37.07 then the word before. 39 00:01:37.07 --> 00:01:39.02 So we're going to add some HTML before 40 00:01:39.02 --> 00:01:42.09 each figure caption content. 41 00:01:42.09 --> 00:01:44.08 Split this open. 42 00:01:44.08 --> 00:01:49.00 First property's going to be content, colon space. 43 00:01:49.00 --> 00:01:52.01 Inside of a string, we're going to type the word Figure, 44 00:01:52.01 --> 00:01:54.08 and a space, then outside of the string, 45 00:01:54.08 --> 00:01:57.06 we'll type in counter, put in our parentheses 46 00:01:57.06 --> 00:02:00.03 and a semicolon, and then come up here and copy 47 00:02:00.03 --> 00:02:02.03 the myFigures name. 48 00:02:02.03 --> 00:02:06.06 Let's paste that inside of the parentheses. 49 00:02:06.06 --> 00:02:09.09 Next let's add a few more properties to style the text. 50 00:02:09.09 --> 00:02:13.05 For color, we're going to set this to a medium gray. 51 00:02:13.05 --> 00:02:16.07 So we'll use the pound sign and three sixes. 52 00:02:16.07 --> 00:02:19.02 Next we're going to set the font-style. 53 00:02:19.02 --> 00:02:22.03 We're going to set this to italic. 54 00:02:22.03 --> 00:02:24.02 And to make sure that each pseudo-element 55 00:02:24.02 --> 00:02:25.07 is on its own line, 56 00:02:25.07 --> 00:02:28.06 we'll come in here and set a display property. 57 00:02:28.06 --> 00:02:31.04 We're going to set this to block. 58 00:02:31.04 --> 00:02:33.06 And then finally, we're going to set a margin-bottom property 59 00:02:33.06 --> 00:02:36.02 of five pixels. 60 00:02:36.02 --> 00:02:38.02 And now to make sure that each figure caption 61 00:02:38.02 --> 00:02:41.07 doesn't change, or reset the count, 62 00:02:41.07 --> 00:02:45.01 we're going to scroll up and find the article selector, 63 00:02:45.01 --> 00:02:48.03 right here, and we're going to set the counter-reset 64 00:02:48.03 --> 00:02:49.08 at the article level. 65 00:02:49.08 --> 00:02:52.06 This way, again, each figure caption inside of the article 66 00:02:52.06 --> 00:02:56.00 won't reset the counter. 67 00:02:56.00 --> 00:02:59.05 So inside of article, we're going to set counter dash reset, 68 00:02:59.05 --> 00:03:02.01 and then we're going to paste in the myFigures name. 69 00:03:02.01 --> 00:03:05.08 Add a semicolon, save your CSS. 70 00:03:05.08 --> 00:03:07.02 Now over here in the browser, you'll see 71 00:03:07.02 --> 00:03:10.01 that we have our pseudo-element typing the word Figure 72 00:03:10.01 --> 00:03:12.02 and a space, and then the counter-increment 73 00:03:12.02 --> 00:03:13.07 putting in the number. 74 00:03:13.07 --> 00:03:17.02 So we can see number one, number two, 75 00:03:17.02 --> 00:03:18.03 and then if we scroll down to the bottom, 76 00:03:18.03 --> 00:03:20.04 we'll see number three. 77 00:03:20.04 --> 00:03:21.07 So by adding a counter-increment property 78 00:03:21.07 --> 00:03:24.03 to the figcaption elements, then the pseudo-element 79 00:03:24.03 --> 00:03:26.04 that references that custom counter, 80 00:03:26.04 --> 00:03:29.09 CSS can count all of the elements in our page. 81 00:03:29.09 --> 00:03:31.03 And so now if you'd like to dive a little deeper 82 00:03:31.03 --> 00:03:33.03 into CSS counters, check out 83 00:03:33.03 --> 00:03:35.05 Using Counters and Resets in CSS, 84 00:03:35.05 --> 00:03:38.00 which is also available here in the library. 85 00:03:38.00 --> 00:03:40.02 And so with that, I'll conclude this episode, 86 00:03:40.02 --> 00:03:43.01 and as always, thanks for watching.