0:00
Yo ninjas, what the hell's going on? This is CSS for Beginners Lesson 24, and today
0:13
we're going to talk all about these nth of type pseudo classes. That's coming up
0:19
Alright guys, I'm here back in the HTML, and as you can see, I've made some changes to
0:23
our lists.html file. I've put some articles in here, and come to think of it, I should
0:28
have done this in the articles.html file, but what the hell, they're here now, and we've
0:32
got four articles here, and between them we've got h1's, hr's, h2e with a marketing message
0:39
and a link, hr down here, and h1 at the top, and then they're all nested within this div
0:44
parent tag. Now in the last lesson we talked about nth child selectors and how we can use
0:50
that to target children of parent tags, and we can do that here. If I wanted to target
0:55
say this article or this article, I can do that. So an example would be, we're going
0:59
after an article type, pseudo class, that's with a colon, and then we'd put nth child
1:06
and say we just want to go after this one here, it's the second child in the list, so
1:11
we'd say two, and then we can start there. And it's the second child because this is
1:15
the parent element, this is the first child, and this is the second child, third, fourth
1:20
fifth, sixth, and so on. Okay, so that would grab this article, and we could start it by
1:26
giving it a background of grey. Makes sense, right? Did all this in the last lesson, so
1:32
let's just view this in a browser just to make sure it's worked. Okay, yeah, there we
1:39
go, it's given a background colour of grey to this first article. Okay, cool. Now this
1:46
nth child pseudo class does not take into regard the element that comes in the list
1:51
and by that I mean, this is the first child, it's a h1, this is the second child, it's
1:55
an article, this is the third child, it's a hr, this is the fourth child, h2, and so
1:59
forth all the way down the list. Okay, so for this to work, for us to style individual
2:05
articles we need to know what child it was within this list, okay? And we may not necessarily
2:11
know that. So it's going to get a little bit tricky, because you might have marketing
2:16
who want to put different messages in between articles, etc, and it's got no kind of pattern
2:22
to it. So we can't always do it this way. But what we can do is use another technique
2:29
called nth of type. Okay, and the way this works is this, we do our colon, the same as
2:33
we would any other pseudo class, and we put nth of type, and then we put 1. Okay, and
2:41
this is still going to grab this first article. And the reason is, because this is the first
2:47
article of that type, and by type I mean it's the first article type. Okay, this is the
2:52
first of type of h1, this is the first of type of hr, first of type h2, so this is the
2:58
first of type article. So we say we want an article, and get the nth of type, which is
3:02
1, which is this here, and it's going to style it with a background of grey. So let's just make sure that's worked. We'll view this in a browser again. Yep, and there we go
3:18
guys, it's still grey. So cool. Now we've used the nth of type. So what else can we
3:24
do with this? Well, we can do other things like keywords as well. So say we want to get
3:29
all the odd ones, which is the first one and the third one, yeah? Again, it's going to
3:34
disregard all these other tags here, because they're not of type article, and it's just
3:39
going to say the odd ones are the first one and the third one. So let's give that a whirl
3:45
eh? Let's put odd in here, just like we did with the nth child, and open this up in a
3:49
browser. Cool, there we go, 1 and 3. And it's disregarding any of the children within the
4:00
list, because they're not articles. We don't want anything except for the odd articles
4:04
So this is really cool. It doesn't matter where these articles are in the list, we can
4:09
target them using nth of type. Let's try a formula. We saw formulas in the last lesson
4:16
So let's try 2n plus 1. And what this is saying, my friends, is that we're starting at n with
4:22
0. So we'll say 2 times 0 is 0, plus 1 is 1. So we want the first nth of type to be
4:30
coloured grey, which is this. And then we'd go up to 1, and we'd say 2 times 1 is 2, plus
4:36
1 is 3. And the third nth of type is this. So it's going to be the same as the odd keyword
4:43
So let's view this in a browser and make sure it's worked. And there we go again, beautiful
4:53
That is styling the first and third ones with a background colour of grey. So this is really
4:59
useful when you've got other tags in between the tags that you want to style. You want some
5:04
kind of pattern with your articles, but you don't necessarily want the tags in between to kind of
5:10
mess up that pattern. Well, nth of type will be your new best friend. So that's about it for nth
5:15
of type. If you have any questions whatsoever, feel free to comment below. I'll try and answer
5:19
all of those as soon as possible. Otherwise, if you enjoy these videos, please like them
5:23
share them, and subscribe. And I'll see you guys in the next one
