Ordered & Unordered List Styling

[00:00:00]
>> Now we are moving on to that list bullet styling that I just mentioned. So, we are on to part 2 here, ordered an unordered list styling with pseudo classes and you guys open up the beginning code pen. So, just as always, it's always good to start anytime you take a look at any of these learning CSS types of things.

[00:00:18]
You always want to take a look at your HTML first and get familiar with what it is. I've used really super simple HTML structures today, so that you can easily carry them in your head and then just concentrate on the CSS. So here we have an unordered list with a class of an ordered.

[00:00:34]
We have an ordered list with a class of ordered and we have a nested list with a class of nested spiffy cool. All right, so that way we can work on three different things. The first thing I wanna work on are- The various types of children. So previously we had talked about siblings and how we could select whether siblings are next to each other or just generally siblings.

[00:01:06]
But there are more specific ways we can go about selecting these. And these are with the so-called nth child classes. So there's a first child, there's last child and there's an nth child, right? There's the oldest of the family, there's the youngest of the family and then there's everybody in between.

[00:01:21]
They're just n. [LAUGH] We don't really discriminate between the ones in the middle. So let's go through how those might work. So I'm going to start all of these off with unordered, because we're gonna use this first list as the one to talk about this. So unordered li, first hyphen child.

[00:01:42]
Any guess what this selector might select before I put anything in his value?
>> First element in the first list in the third list.
>> Okay? So it's going to select which one of these, Ben.
>> Here's the thing, the first ally.
>> There's very first thing here.

[00:02:00]
Here's the thing, okay? Sure enough if we said color red, it will select that first bullet item. Shockingly, right? Guess what happens if I said last child.
>> A Lincoln nothing turns red,
>> A Lincoln a thing turns red.
>> The second one I should say.
>> Oops, what happened?

[00:02:33]
Can you explain that?
>> The a element, so the UL or sorry, the Li element is inheriting the color red. However, the, A element that actually makes up the content has its own color.
>> Correct.
>> Is this is what we're saying.
>> Exactly, exactly what's going on.

[00:02:51]
So Maybe you can just see there the dot is red, but the link itself stayed blue and that's because that blue styling comes from our default browser style sheet. We haven't overridden that yet that has to do with inheritance, we will get there later on today, okay? So that's first child, that's last child, and in fact, we can just to prove to you that this in fact works.

[00:03:14]
We could say ordered li last child and the last child there would show up. Okay, so that's first child that's last child. Those are pretty easy to understand, then we have nth child. Nth child, okay, so nth child starts off pretty simple. So we can put in any number directly inside of nth child, so I can say, nth child six and that will select the six list item and make it red.

[00:03:49]
This may seem completely useless that's what people usually tell me at this moment in time, Jen this is the most useless trick I've ever seen. Why would I want to make the sixth child red? And I agree with you in this context but there is a very cool trick associated with the selector.

[00:04:06]
I'm going to show you a little bit later on today, but that is one thing you can do. So just put in a number whatever number, if that number exists, then it will be selected. We count like humans in CSS, so we start with one not with zero, [LAUGH] okay?

[00:04:23]
And so if I said nth-child 1, that would be the same thing as saying first child. All right, so that's the easy one. Then we have the next one that's really easy. We can say odd or even. I'm getting bored with that, let's make it a background color.

[00:04:48]
Odd or even, so odd we'll start with the first child,. In this case, number one and then count by odd numbers, one, three, five, seven, nine, etc until the end of time. This seems much more useful, yes? Imagined in table structures this is a way you can stripe your table rows very easily, okay?

[00:05:10]
Guess, what else I can use as a key word here?
>> Prime.
>> Not prime, even. [LAUGH] And shockingly, that will do the opposite, okay/ So now we select the even number guys, right? Very useful, very useful, you'll see I didn't even use it all the time. Then we get to the last one which is just weird.

[00:05:41]
Let's say, if I said this, 3n. 3n, this starts to look like algebra, okay? So 3n is doing what?
>> Every third element.
>> Every third element, so one, two, three, four, five, six. And then I don't have a nine, so that's as far as it gets, all right?

[00:06:07]
So three n that is what that can do and of course, we can then make it four n or whatever, right? We can continue on with that pattern. Then the weird part comes and the weird part is when we say something like, plus two. I'm pologize to all of you who are flashing back to algebra, but I promise you this is not algebra.

[00:06:35]
So what is this saying? Anyone have a guess what 3n+2 would mean?
>> So the value of n is what spot in the list we're in, and then so we'll add 2. So, the second element is highlighted because n is 0, and so therefore that second one gets selected and then we have the fifth and the eighth, which are valid for n equals 2.

[00:07:01]
>> Very cool, very cool and very close. The end doesn't really mean anything I don't think. [LAUGH] Can't think of this as algebra. So with the plus sign the plus two means we're going to start with the second one. So notice that we started there with number two and then we're going to follow the pattern of every third one starting with the second item on the list.

[00:07:26]
Every third element starting with the second one on the list, so Dan I know you were saying this was new for you last week.
>> So isn't this still algebra?
>> No, there is no algebra. It looks like algebra I know, don't try to solve it, don't try to think of it as algebra.

[00:07:44]
I don't know why they chose to write it this way, but that last number there after the plus sign tells you which child to start with, in this case, the second child and then-
>> It'd be putting each value of, like zero into n, 1, n 2 n and then 2 and n and you'd get each number correct.

[00:08:04]
If you put n equals zero, you get two, n equals one, you get five and you're getting each one of those. I can't stop thinking of it that way.
>> Okay. If the math works, then then that's great, but I think of it as the last number and number two is where you start and then the three n just indicates every third n.

[00:08:29]
>> Then is there a reason it's not zero indexed?
>> As in why don't they start with zero?
>> Yeah.
>> Because it's CSS and it's for designers and they kind of like humans [LAUGH] Like engineers. All right, so with that part of info child understood, a single number odd and even keywords or the weird algebra looking thing that's not algebra, stop thinking that way.

[00:08:54]
The reverse is also true here, we can also say nth- last- child and last child this counts up from the last child and assigns the styles. So now we're counting from the bottom, this is the second one and then every third one from the bottom, okay? Likewise, we can do add in even from the bottom up.

[00:09:15]
We can also do a regular old number from the bottom up. This would select the second one from the bottom. Make sense? Okay, some of these feel a little bit esoteric, and a lot of ways I think nth child is the one that pretty much everybody uses in programming.

[00:09:36]
But if for whatever reason counting from the bottom is simpler this is possible. What would happen if I put in a minus sign here instead? So if I go back to my nth child and I put in a minus sign between 3n- 2. What does that mean?
>> I'd assume it would move the starting position, quote, unquote, back, in determining which items to actually highlight.

[00:10:04]
>> Okay, move the starting position back. So, yeah.
>> Yeah.
>> Yeap, that's pretty much it.