Up next in 10
CSS Tutorial For Beginners 23 - nth Child Selectors
1K views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers learn about the nth-child selector, a powerful tool for targeting specific elements within a parent container based on their position. The video likely covers the syntax and usage of the nth-child selector, demonstrating how it can be used to select elements that match a specified mathematical formula, allowing for highly flexible and dynamic styling. Viewers can expect to learn how to use the nth-child selector to apply styles to elements such as every third paragraph, every even or odd item in a list, or any other desired pattern. Practical examples and demonstrations may be included to illustrate the versatility and effectiveness of nth-child selectors in CSS styling. This tutorial serves as a valuable resource for beginners looking to create more complex and customizable web layouts with CSS.
View Video Transcript
0:00
Yo bros, what the hell is going on? This is CSF's Beginners Lesson 23, and today
0:12
we're going to talk all about these nth child pseudo classes. That's coming right
0:15
up. Alright, so before we dive into the code, I just want to quickly go over
0:20
again what children are in relation to HTML. So we've got this simple UL tag
0:24
here, and then four LI tags within that UL. Now we'd say that all these are
0:27
children, right? They're direct descendants, they're children of the UL tag. And the way
0:31
nth child works is that we can go after different children within tags. So we
0:35
know this is the first child, second child, third child, and fourth child, or
0:39
last child, yeah? So say we want to grab the third child, we can do that with the nth child pseudo class. So that's what we're going to do right now, we're going
0:46
to jump into the code and go through nth child pseudo classes. Alright guys, I'm
0:50
back here in the HTML, and I've made a brand new file just for you guys. It's
0:54
called lists.html, and in it we've got this simple UL tag, and within that
0:58
about 10 or 11 LI tags. Now the first one has got a bit of a title kind of air
1:03
about it, and so is this fifth or sixth one here, halfway down. So we want to grab
1:07
these and style them differently, I want to make them stand out, so we can use the
1:11
nth child selectors, or the nth child classes rather, to do that. Now the way it
1:15
works is this, first of all we grab all of our LI tags as normal, that would be
1:20
the selector, right? To get the LI tags, and then we add our colon to say that a
1:23
pseudo class is coming up. Now the keyword is nth-child, but it doesn't
1:28
stop there. Now we need to specify which children we want, and this is where it
1:32
differs a little bit from other structural pseudo classes. We pass an
1:35
argument, or a value if you like, to this pseudo class. And the way we do that is
1:40
by passing it through to a set of brackets here, okay? And then we put the
1:44
child, sorry, the value, or the argument as most people call it, within those
1:49
brackets. So we want the first child, so we'd say nth-child 1, and then we want
1:54
to make this bold, so font-weight bold, yeah? And then we also want the, what is
2:03
it, one, two, three, four, five, six, seventh child. So we know that we can add
2:09
multiple rules on one line, doing the comma delimited list, and we can put our
2:14
second one in. So li nth-child 7, and then that's going to grab this one, and it's
2:21
going to style both of these bold, okay? So let's just save that and make sure
2:26
it's worked. We'll right-click this and open it in the browser, put in Google, and
2:34
there you go guys, item 1 is there, and item 7 is there. Unfortunately I've not
2:40
saved my list.html, so these titles haven't shown up, so we'll do that again
2:45
Show in Explorer, and Google Chrome, and now that's saved, you can see these titles
2:53
here, they are bold. Alright, so that's what nth-child does for us, we can grab any
2:58
child within a structure, and we can style that one child, so we don't need
3:03
classes or IDs that make things unsemantic, we can just use the nth-child
3:07
selectors, which is really cool, okay? Now there's more to it, instead of passing
3:14
these numbers through as arguments or values to the nth-child, we can pass other
3:18
things as well, we can get a little bit more complicated and do some really cool stuff, so I'm going to show you a few examples of what we can do with nth-child
3:25
okay? So say for example we want all the even ones, which is the
3:31
second one here, the fourth one here, even though it says item 3, it's the fourth child, the sixth one, the eighth one, all the even children we want to style in a
3:41
particular way, we can do that, we can say li again, nth-child, and then we can say
3:50
even, so we do pass it through a keyword instead of a number, and then style it
3:54
and we can say, okay, we want these to be background grey, yeah? And then we can do
4:01
exactly the same with the odd ones, so I can copy and paste this, and put odd in
4:09
here, and this time we'll use pink, this is going to be a nice manly list. Alright
4:16
so we're saying we want all the even tags to be grey background, and all the
4:20
odd tags to have a pink background, so let's take a look at that in a browser
4:25
open this up in Google Chrome again, alright, there we go, that is pretty cool
4:32
it's looking a bit more like a table now, so we've got this one here, which is an
4:36
odd number, don't forget that's one, two, even, three, odd, four, even, so the
4:40
coloring them in stripes according to whether they're odd or even, so we've
4:45
seen where we can pass a number through, and where we can pass a keyword like odd
4:49
and even through, now we can do even more, say for example, with our pattern, this is
4:55
a pattern, yeah, we're saying all even ones and all odd ones, that's like a really simple pattern, now we can add, we can have a more complex pattern, we could
5:02
say li nth child, and then within our brackets we pass an argument of a
5:10
formula, now they can get quite complex formulas, so I'm going to leave you
5:15
guys to kind of research that on your own, but I'm going to give you a simple one, and we're going to say 2n plus 1, okay, now n starts at 0, so for every
5:26
number, from 0 to however many numbers you've got in your list, we use this
5:32
formula, so we start at 0, and we say 2 times 0 is 0, plus 1 is 1, so that's
5:40
tagging the first link, the first tag, sorry, the first li tag, so let's just say
5:45
actually color green, yeah, so we're going to color all the li tags that fit
5:52
into this formula green, so the second one is n equals 1, so we do 2 times 1
5:57
which is 2, plus 1 is 3, so we're going to get this first one, and then the third
6:02
one, then the third number is 2, so we do 2 times 2 is 4, plus 1 is 5, so then the
6:11
fifth tag gets styled, so let's have a look at that in a browser, open this up
6:16
again in Google Chrome, alright, and there we go, these are all the green items
6:24
now, and it might look like it's just the odd items, and essentially that's what
6:28
it is, but we've done it using a formula, now we can change this formula, and we
6:32
can say 3n, so again starting at 0, 3 times 0 is 0, plus 1 is 1, so this one
6:38
will be styled green, 3 times 1 is 3, plus 1 is 4, so the fourth tag will be
6:44
styled green, 3 times 2 is 6, plus 1 is 7, so the seventh tag is going to be green
6:50
so, and you know, so on, so we'll see this in a browser, show in Explorer, and open
6:56
with Chrome, and there we go, we're getting more complex kind of formulas
7:04
and you can kind of mix it up however you like, you can research these in your
7:08
own time, and play around with these formulas to kind of get the elements that you want to target, so you can see this is really flexible, it's quite
7:16
complicated when you first start out, but stick with it, practice, and you will get
7:21
there, it's a very good tool to have in your arsenal, don't just skip over it
7:24
thinking you're never going to use it, because the amount of times I've used this, when I've been in a bit of a quandary, when I've been looking at
7:30
complex websites, and I'm thinking, well, there's no classes attached to those
7:33
and I've not got access to the HTML, that's with the client, so I have to use
7:37
the CSS alone, and these have kind of got me out of a hole in a lot, a lot of
7:42
cases, so stick at it, learn them, if you have any questions about them
7:46
whatsoever, feel free to comment below, and I'm going to answer all of those as soon as I can, otherwise, if you enjoy these videos, please like them, subscribe
7:53
or share them, and I'll see you guys in the next one
#Crafts
#Online Media
#Performing Arts
#Visual Art & Design