In this video, we're going to be looking at descendant selectors, pseudo classes and other pseudo classes are going to first child, last child and child. And then we'll talk about zebra striping a table. Alright, so descendant selectors. Sometimes they're also called contextual selectors. And they're basically a combination of an ID class and or element selectors separated by a space. So for example, you could have this idea of horde, or with a class of zombie with an element of B. I mean, there doesn't have to be one ID one class one element.

It can be two elements. It can be two classes on ID. It can be one ID and an element it can be whatever combination you want, however many you want. And in this context, this one means only be tags that are within an element with a class of zombie and which is also an element with an ID of Horde. Alright, so given horde, zombie. We have an idea of horde here we have a classic zombie and B.

So this is selected, since there's no b this is not selected. Since this is not in a classes zombie, this is not selected. And although this is a classic zombie with a B, it's not selected because it's not within the idea of Horde. pseudo classes are ways to select elements based upon aspects about them. So first child is going to select the first child of another element. And pseudo classes are written with a colon between the selector and the pseudo class.

So ul Li colon first child will be an example. So given ul Li first child, we have a horde ul, Li, first child. So we have a ul here, we have an Li. So this is the first child of the UL. So this one selected, this is an Li within a ul, but it's not the first child so it's not selected. Here we have another ul.

The first child, however, is a B tag. So it's not selected. It's not an Li and this as an Li is not the first child so it's not selected. We'll take another Look at this in the code to make sure it's clear. All right, last child is going to work the same as first child is just gonna go from the opposite direction. So giving you l Li last child, we have our ul, we have an Li, this is the first child, it's not the last child.

So it's not selected, but this Li is selected because it's the last child. Now if you only had one Li element in here, then it would be both the first and the last child so it will be selected. As the only child it would be selected for both first child and last child. And here we have another ul, the B is the first child Li is the last child, so it is selected. And the B tag of course is not. Then there's no child.

And this is a function that can take number a keyword or formula. So for instance, if we just put a seven, it's going to select the seventh child of the UL, but only if it's an Li. You can put an even which is gonna select all even children eg 246 Who do we appreciate zombies zombies, here we have a function three n minus two. So when n is one, you know three times one is three minus two is one, when n is two, we have six minus two, which is four, and then seven and 10, etc. So that would be a function that would select those particular elements. Now zebra striping is when you make table rows, alternating colors, or to make it easier for people to follow the row across.

So you can use a child for this with for instance tr, and child od setting the background color to light gray would be a great way to do this. Alright, let's look at some code. The same examples from before so we have here given the hashtag cord dot zombie. What I've done here is just set colors on those that are selected to help make it clear that they're selected or not. Alright, so it should be color blue. B tag within a zombie within a horde.

Alright, so here We have a B tag, which says it's selected, but it's a B tag within a zombie within a horde, so it is blue. And none of these others are selected. Just as we talked about before, this one's not something because there's no B tag. This one's not selected because there's no zombie tag. And this one's not selected because there's no horde tag. Alright, first child using the same code as we saw before, and here I'm just changing the color to green.

For those that are selected. First word, we had to add an ID just to make make it clear. So first toward ul Li, first child. So we're in first toward ul Li, first child, this one's selected. And this one's the green one. This is the second child so it's not selected.

This is a ul, still within first word. But the first child is not an Li tag. So it's not selected. It's just bolt. All right, next we have last child So last child here. Last Child selector we have hashtag last word ul Li last child.

Everything's within the div last word. So we have a ul, and Li is the first child. It's not the last child so it's not selected. And then we have an Li, classic zombie. It's selected because it's the last child so it's turned red. And we have another ul the first child is a B tag.

The last child has an Li tag so it is also selected. So it is red. And then lastly, here we have a table that we're zebra striping. So we just set the table row with an nth child of odd. So choose first, third, fifth, seventh, etc. background color of a, just a slight gray.

And here we have the opening table we have the caption for the first row zombie one zombie two second row zombie threes on before Third rows, I'll be fine. I'll be six. For throws, I'll be sevens on the eight. Fifth rows, I mean 10, six rows, I'll be 11, zombie 12, etc, all the way down to zombie 16. So as you can see the odd rows have a background. That's great.

So we have this first, third, fifth and seventh ones. Alright, that's it for zombie selection. We're next going to talk about the zombie polka or rather, accordion menus.