0:00
Yo guys, what's going on
0:09
I'm Beck once again with the CSS video, Lesson 21, so let's all get busy
0:13
That was awesome, right? Anyway, in this lesson we're going to talk all about first and last child, pseudoclasses
0:22
That's going to be right up. Okay, so hopefully my wrapping's not put you off and you're still watching
0:27
If you are, thank you very much. Okay, so first of all, I want a quick recap on the last lesson
0:32
and we said that in the last lesson, dynamic pseudo-classes can be used to target behavioral state of an element
0:38
Now, this might be the hover state, or the active state, or the visited state. They're the three most common, I would say
0:44
And this can be on any element, but primarily it's used for links or buttons
0:49
or anything that's a bit more interactive on your web page. So in this lesson, I want to talk more about structural pseudoclasses
0:55
and how they can help us target complex structural elements. that we wouldn't normally be able to do with ordinary selectors
1:02
So I'm going to jump back into the code and see you guys there. All right, guys, so here I am back in the HTML and we're back on the articles page here
1:10
and I've changed it up just a little bit. I've got some Laura, some dummy text in here
1:15
We've got three paragraphs, sorry, four paragraphs. And in the final paragraph we got a little link tag saying if you want to read more click here And it the same for both articles Okay so what we going to talk about in this lesson is the first and last child pseudoclasses
1:32
Now what does that mean? Well, we already know that children are elements that are nested within parent elements
1:39
So let's take this article tag for an example. And by the way, this article tag is a new HTML5 semantic element
1:46
and I'm going to do probably a course in the future about HTML5 and those kind of semantics
1:50
so stay tuned for that. For now, don't worry too much about it. Just take this as the parent element
1:55
This is the one that's containing all these P tags. Now, the P tags are children elements, okay
2:00
So we've already learned that. And these are the kind of relationships we can build upon using structural pseudoclases
2:07
So, say we want the first child of this parent. Now, the first child would be the first one that comes directly
2:16
beneath that parent so that would be this p tag here. It's the first child, first child
2:20
second child, third child and this would be the last child or fourth child. Okay and it's the same
2:25
for both. So we can target the first child and the last child directly without adding any
2:32
classes on so we don't have to get anti-semantic or anything like that
2:38
Yeah I going to show you how to do that So the first thing we do like any other pseudoclasses first of all have our normal selector and in this case we saying P We want to go after the p tags and at the minute this is selecting all of the p tags on the page okay and we can be more specific we can say article p because we know
2:55
about descendant selectors this is a descendant of article and now it's just grabbing the
3:00
article selectors which is still all the p tags on this particular page anyway that
3:05
would be our normal selector for the p tags so how do we add these first and last child
3:10
pseudo classes on well like all pseudo classes we have the colon to say that there's a pseudo
3:15
class coming up and then we put the keyword now pretty self-explanatory all it is is first
3:21
hyphen child that there my friends is going after this first child here because it's the first child
3:28
of this parent element so now we can style this one on its own without hitting any of these and I
3:35
want the first paragraph to kind of catch your eye want it to be bold so we're going to say font weight
3:40
bold okay and that's all there is to it we've got our pseudo selector here our
3:47
our structural pseudo collector of first child and it's getting his first child and
3:52
style it bold all right so likewise we can do a last child pseudo class and we do
3:58
it in the same way we say article p last child and then do our declaration and this one here is a sentence telling us to click here for more information And I want this to stand out as well This time I going to colour it red
4:15
This might look pants, my friends, but I don't care. I just want to use this as an example
4:21
So I'm going to save that off now. And I'm going to open it up in a browser
4:29
Google Chrome. All right, there we go. you see we've got these P tags here this is an article and this is an article and the
4:37
first one first child is bold and the last child is red with exception to that link because
4:43
don't forget we've got default browser styles overriding that inherited style of red so the
4:48
browser is coloring coloring this blue and it's the same here first child bold last child red so
4:55
cool that's how to use first and last child pseudo elements if you have any questions about
5:02
these whatsoever feel free to leave a comment below I'll get back to you as soon as I
5:05
can with all of those and if you like these videos please like subscribe
5:09
comment share whatever and I'll see you guys in the next one where we're
5:13
going to look at some more structural pseudoclasses
