Check out a free preview of the full CSS In-Depth, v2 course:
The "Counters" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Understanding how CSS Counters work: a counter you can display a number based on a condition in CSS.

Get Unlimited Access Now

Transcript from the "Counters" Lesson

[00:00:02]
>> Estelle Weyl: So we've already seen examples of the counter, and we've seen examples of the attribute. We've also seen examples of strings, and we did see examples of empty string, which is still a string. So the way the counter works is, you give a counter a name. So in this name I called it sections.

[00:00:32] So every time it hits a section, it's gonna recount. So let's say you want to count, you're writing a legal document and you can either use ordered list and nested ordered list or, if you wanna use headers and paragraphs, you can actually count how many headers you have like every time you hit an h5, right, you reset the counter for h6.

[00:00:58] Every time you hit a counter for h, you hit at h4, you reset the counter for h5. Every time you hit a counter, an h1, you reset the counter for h2. Because if you were writing a book, you would want, right, the main header, you would wanna restart every time you hit another major header.

[00:01:17] Does that make sense to people? So that is where you would put your reset. So here in this document, every time I hit a section I reset the counter to zero. Then if I add a header, before any h1 that is called the section title, I would say part, and whatever part of that section it is.

[00:01:42] So every time I have, like if I'm writing a play, and it's done in sections, like there would be act one and act two, which might be an article. And then within each article there would be sections. And every time I hit a section I restart counting at zero.

[00:01:54] And then my first h1 is the first header. And the second h1,a, yeah the second h1 where there's a section title would be number two and number three. And that way, I wouldn't have to have to put everything in an ordered list to count it. And then you have to increment the counter.

[00:02:15] So if you just said counter sections, it would always be one, one, one, one, one. You increment it every time you hit.
>> Estelle Weyl: So it says sections. That's the name of the counter. So it's incrementing the counter called sections. You can have any name number, and I didn't look up the rules for naming but generally I assume it's definitely an ident.

[00:02:43] The difference between an ident and a string, is a string has quotes and ident does not. Generally an ident cannot start with digits or two underscores. Yes?
>> Speaker 2: If you switch those two lines over there.
>> Estelle Weyl: Yeah.
>> Speaker 2: Will the counter increment start before the content, would it start with part two rather than part one?

[00:03:02]
>> Estelle Weyl: No.
>> Speaker 2: Okay.
>> Estelle Weyl: All right, because it's actually on the header, it would do all of that so, it increments every time it hits one. It would, we saw with the generated content, the before and after, remember when we did the, we had the number of errors and we put it before, and then we put it after in the <li> before it actually hit the element where it incremented.

[00:03:26] It incremented on every error. So when it was in the before statement, before the error, it was at one. When it was after the input, which was after the error, it was at two. Okay, then we have attribute. And so any, as we said earlier, HTML can have any number of attributes.

[00:03:46] And when you do attribute with the attribute name, on an element, it 'll print the value. It will print the value as a string. It will not interpolate the value of that string, right? So, if I put in an image, it will just give me the URL of the image.

[00:04:09] It will not actually put an image. We don't have this yet. But we will at some point hopefully have attribute, and then you can put the attribute name. And then a unit, and you can actually do multiplication. And then you could have a fallback, so say it doesn't have an act, that attribute doesn't exist, you could actually put a back up.

[00:04:31] So like If we did data count five, right? I could do five pixels. So here I could use it not just on generated content but on something else. Like width, attribute data count, and then PX. So you could actually, this is not yet supported, but in the future hopefully this 'll exist.

[00:04:56] And the units can be length or angles or whatever.
>> Estelle Weyl: And these are, I guess the fallbacks I'm not sure what, I forget what I put there. So here I have, this is what the future holds, paragraph with a data count of five. And then I could say at the width of that paragraph should be it's attribute of data count, five ms, right, ms.

[00:05:25] So it 'ld five ms, and if the data, if this did not exist, this attribute did not exist, there 'ld just have the width of auto. That is not yet here, that is in the future.