This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "nth-of-type Structural Selectors" Lesson
[00:00:02]
>> Estelle Weyl: So we've had the, let's go back to here. We tried the first child, the last child, the first-of-type, the last-of-type, only-child, and only-of-type. But you can be more specific, you can say the third, you can say every third, so 1, 4, 7, 10, or 2, 5, 8, 11.
[00:00:26] You can say there's two key terms, there's odd and even. But otherwise, it's an equation that is an+b. The b being the offset, and the offset can be negative, and the an, the n is actually the letter n. The a is the variable, and it's basically how many times do you, it is an interval.
[00:00:49] It's an interval of 3 if we put 3n, but it's somewhat like the incrementer, whatever. So the letter n is the thing that is, it's not required, because if you leave out, here, we left it out, and so it's just the fifth element. Right, but if you're going to iterate, then it is the letter n, and there can't be a space.
[00:01:10] This is wrong, this will not work, that works, okay, so the equation is, an+b. Which b is the first value where you start counting, so it could be negative 7. And if the incrementer was 3, so it was 3n- 7, well there's no negative 4 and there's no negative 1, so it'd really start with 2.
[00:01:31] But, if you had b being 12, so it was 3n + 12, the first item to be targeted would be number 12, and then it would be number 15, number 18, number 21, so.
>> Estelle Weyl: Left off the CSS for this one, okay, so let's,
>> Estelle Weyl: Okay, so before we add Flexbox, let me see if I can,
[00:02:09]
>> Estelle Weyl: Make the Flexbox,
>> Estelle Weyl: Then we'll go like that.
>> Estelle Weyl: Okay, so I'm just gonna go to these two slides until we can catch up, cuz there's a typo in the slides. Okay, so here we have structural selectors, and the first-child and the last-child are both bold. So what number, we have 10, what number is the first and the last?
[00:02:33] 1 and 10, so 1 and 10 are both bold. Then we have the first-of-type and the last-of-type. Because we only have the only thing that can be a descendant of an ordered or unordered list is an li. So it matches the first-child and the last-child. But it could have been, if we had done paragraphs in h1, it would have been different.
[00:02:58] Then we have nth-child(even), background-color gray. And so you'll notice that 2, 4, 6, 8 and 10 have a background color of gray. And then it says nth-child(3), so just the third one, make it gray
>> Estelle Weyl: As in the color, and so you'll see all of them are black or blue, except for number 3 is gray.
[00:03:25] And then, it says nth-of-type(odd), made it white. Which just made it stripe, I could have made it a different color. And then nth-of-type(4n), so that means every fourth. So it's number 4, number 8, if we had continued, it'd been number 12, number 16, number 20, number 24, so that's 4n.
[00:03:47] And then the last equation says 3n-1, so we start with n being 0. And 3n- 1 is negative 1, so that doesn't count. Then we say, if n was 1, it would be 3 times 1 is 3, minus 1 is 2. And then if n was 2, it would be 2 times 3, which is 6, minus 1 is 5.
[00:04:11] Who said you didn't need to know math, right?
>> Speaker 2: [LAUGH]
>> Estelle Weyl: So we have number 2, number 5, number 8, and it would have also continued onto number 11, and would have continued ad infinitum, of making those aligned right. Do people understand the equation of an + b, okay.
[00:04:32]
>> Estelle Weyl: So before we had Flexbox, you could do stupid pet tricks like this. Which is, you could say, the element that is the only of its type, give it a width of 100%. If you have two elements, so the first element would be the first of its type,
[00:04:55]
>> Estelle Weyl: And nth-last-of-type, starting from the end. So here I'm showing you last-of-type, we have not started from the end before. So nth-last-of-type, so start at the end, and then do the equation. So an element that is both the first of its type and the second from the end means there's exactly two elements.
[00:05:20] This next line says nth-of-type(2), which means it's the second element, right, and it is also the last of its type, right.
>> Estelle Weyl: That means there's exactly two, but it's the second one, so bake those both 50%. And then going onto the fourth one, it says nth-of-type(1):nth-last-of-type(4).
>> Estelle Weyl: So it's basically something that is the first one and fourth from the end, which means it's exactly 4, right, make it 25%.
[00:05:54] So this is what we could do before we had Flexbox. But later on today, we're gonna cover Flexbox, so we don't need to use these stupid pet tricks. But I just did wanna show you that you can put two things together, you can string selectors along like that.
[00:06:12] Okay, so I believe we are back to here, yes. So here, feel free to take two minutes or three minutes, let's do three minutes, to play with this.