0:00
Yo guys, what the hell is going on? This is CSS for beginners lesson 22, and in this video
0:12
we're going to talk all about the first and last of type pseudo classes. That's coming
0:16
right up. Okay then, so here I am back in the HTML file, and I've kept up the rules we used last time
0:24
when we talked about first child and last child, because I want to demonstrate how that now I've changed the HTML, they're not going to work. And I've changed the HTML in this
0:32
way, in each article I've added at the top H2, and that's going to be the article title
0:37
And then at the bottom of each article I've added this HR tag, which remember is a horizontal
0:41
rule, and that's going to add a line at the bottom of each article to kind of separate them
0:45
So, in the last video we tried targeting the first child and the last child P tags. Now
0:51
this isn't going to work anymore now that I've added these extra tags, and this is why
0:56
The P we want to target is this, and it's no longer the first child. The first child
1:00
is this H2, and this is now the second child. Likewise at the end, this is no longer the
1:05
last child, the last child is this HR. Okay, this is the second to last child
1:10
So how do we get around this? Well, we can use what's called the first of type and last
1:16
of type. Okay, and even though this is not the first child, this P tag here within the
1:21
article, it's the first child of that type, and by that type I mean the first P. Okay
1:28
There's four P tags here, and this is the first of that type. The type is P, and that's
1:35
the first of them. Does that make sense? So we can still target that using the first of type pseudo class, and this is how we write
1:44
it. We keep our basic select to the same, article P, because that's going after every
1:48
P in an article, and then we hold it down by adding the pseudo class with a colon, and
1:53
then the keyword of first of type, and they're separated by hyphens there and there. And
2:00
then, like I said, that grabs the first P within the article, which is this. So we can
2:07
still do it. And likewise, the last of type P is here, because it's the last P within
2:15
the article. Does that make sense here? So again, we can still target this with a pseudo class by having our simple selector
2:22
grabbing all the P's, then adding our colon to say pseudo class is coming up, and then
2:26
adding the keyword last hyphen of hyphen type. It's as simple as that, guys. That's all we
2:34
do. So I'm going to save this, and we'll view it in a browser just to make sure it's worked
2:40
I'm going to show this in Google Chrome. Okay? And absolutely no change from last time
2:48
We've got our article titles here. We've got our horizontal rules here and here, splitting
2:54
up the articles, but we're still managing to target this first P and this last P. Okay
3:00
So that's really cool, the fact that not only have we got first child and last child, but
3:05
if other elements are getting in the way, we've got first of type and last of type to
3:09
fall back on. And if this doesn't work, then there is another way. I'm not going to cover
3:15
that here. I'm going to cover that in the next lesson. That's called the nth child selector
3:19
Okay? So we're going to take a look at that in the next video. In the meantime, if you
3:23
have any comments or questions about these two pseudo classes, then feel free to comment
3:29
below. I'm going to try and answer all of those as soon as I can. Otherwise, please
3:33
like, share, subscribe, and I'll see you guys in the next video
