0:00
Yo guys, what the hell is up? This is CSS for Beginners, Lesson 17, and in this video
0:11
we're going to talk about adjacent selectors. That's coming right up. Okay guys, I'm back here in the code, and as you can see I've created a brand new page
0:19
for you. It's called articles.html, and it's very simple. We've kept the same head and
0:25
the body and the header here as the other pages. However, we've added this content in
0:29
here which is a div with an ID of all articles, and then within that we've got three dummy
0:34
articles, which by the way I took a long time to write. As you can see the content is brilliant
0:39
so if you get a few spare minutes feel free to read through that for you guys
0:43
Anyway, what is an adjacent selector? So an adjacent selector is a selector that selects
0:50
an element which comes directly after another element. Now you might be sitting there thinking
0:56
well that's useless. If I want to target an element I'll target it directly. Now, yeah
1:01
you can do, but imagine this scenario. We've got this page here with some articles, some
1:07
dummy articles in it, three of them, and each one is made up of a H2, then it's got a P
1:13
tag directly after it which says who it's published by, and then underneath that you've
1:17
got P tags for the actual content. It's the same structure in each article. Now imagine
1:21
that we want this second P tag here to be targeted separately and styled in a different
1:27
way than these P tags here. Now, how can we do that? You might say, yeah we can go in
1:32
and give this a class of, I don't know, publisher, and we could do that for this one, this one
1:39
and this one. Then we could style that class a bit differently, and yeah you can do that
1:44
but now imagine that you had 50 articles. Now you'd have to go and give each one of
1:49
those a class of publisher. Not really time efficient if you're asking me, so not the
1:54
best way to do it. This is where adjacent selectors come in, because you can do it without
1:59
putting anything else in the HTML, which is brilliant. Great time saver. So how do we
2:04
do this then? Well, if we were to say give it a selector of all articles, which is this
2:12
div here, this is the parent div, and then we're saying we want all the P tags which
2:16
are descendants, what's that going to do? Well that's going to go out and find all
2:20
the P tags which are descendants of this, which is every single P tag here, and it's
2:25
going to style all of them the same. We don't want that, we just want this one. So what
2:28
we have to do is delete that P there, and we use an adjacent selector. So in each one
2:36
it comes directly after the H2. So what we need to do is say we want to get all the P
2:42
tags within all articles that come directly after the H2, and the way we do it is this
2:48
We're saying we want to grab all the H2 descendants first, of all articles, that's this, this
2:53
and this, and then we use the adjacent combinator, that's a plus sign, and then the P tag. And
2:59
then we can put our declaration. Let's just give it a colour of green. So this is saying
3:06
here, all articles is the parent, then get me the H2 descendants, that's this, this
3:12
and this, and then this little plus sign is saying, and get me the P tag, which is
3:17
an adjacent P. So any P tag that comes directly after the H2, which is these three, get me
3:24
those, and we'll style those. That's what we use this adjacent combinator for. Okay
3:30
makes sense? So I'm going to save this now, and we'll view it in a browser just to make
3:34
sure that it's worked. Get that in Chrome. There we go, now you can see that these are
3:40
styled nicely in green. We can apply whatever styles we want to those, and they're going
3:45
to be different to this without adding anything to the HTML. So really great technique. Now
3:51
if you have any questions about this, feel free to comment below, I'll answer all of
3:55
those. If you enjoy these videos, please subscribe, please like them or share them. There's another
4:00
one coming very soon, so I'm going to see you guys in that one. I'll see you guys then. Bye
