0:00
Yo guys, what the hell is going on? This is CSS for beginners lesson 25 and in this video
0:13
we're going to talk all about combining selectors. That's coming up. Alright then, so I'm back here in the HTML and as you can see I've changed it once again
0:21
and this time I've got two articles at the top, this one here and this one here, two
0:25
div tags at the bottom with images in between, a bit of a gallery. And the top article has
0:31
got a class of featured content and the top div has got a class of featured content
0:36
Now say we want to style the featured content article differently and the div of featured
0:42
content differently. But we don't necessarily want these two styled the same because this
0:47
is an article after all and this is going to be an image. So how do we do this? Well
0:52
we can't just have one rule targeting the class of featured content and then style that
0:57
because that's going to take both of these and style them the same. We don't want that
1:02
We want to style them differently. And so what we do is we combine our selectors. And
1:08
what I mean by this is this. First of all, we'll start with the articles. We want to take the article tags. And if we put styles in this it's going to style both this and
1:15
this. We don't want that, we want just the article tag that's going to be featured content
1:19
So the way we do this is by combining our article element selector with our class selector
1:26
of featured content. So we don't have any spaces and then we just do our class selector
1:30
directly after, which would be this. And that there, my friends, is saying go out and get
1:35
me the articles which have a class of featured content and style them this way. We'll just
1:40
give it a background of red. And pay attention, there's no space here whatsoever. It's just
1:46
article and then the featured content selector here, which starts with a period, remember
1:52
So that's how we do it. Remember if there was a space there, this would say go out and
1:56
get me the featured content class, which is a descendant of article because of that space
2:01
We don't want a space. So now it's getting all the articles that have a class of featured
2:07
content. And if there were multiple of these, if there were two of them, it would get both of them. If we put that there, it would get both of these
2:14
So let's just delete that and target our div featured content. We do exactly the same
2:21
We go after the divs first of all. And then we say we want a div which has a class of
2:27
featured content. All right. Same again. We're combining our div selector with our class
2:35
selector of featured content. And this time we'll give it a background of blue. All right
2:41
I've done that a little wrong there. There we go. So that makes sense here. And we'll
2:47
save this and view it in a browser. And there we go, guys. This is our featured article
2:59
and this is our featured image. There's no image there because I've not put a particular
3:03
image in. I've just put a kind of dummy symbol I think. But anyway, that's not the point
3:07
The point is we've targeted the article which has a class and combined those two selectors
3:11
And we've targeted the div which has a class of featured content and combined those two selectors. And we've styled them differently from each other. Even though they're both
3:18
the same class, we want to style them slightly differently depending on the element
3:23
OK. So that is how, my friends, we combine our selectors. If you have any questions whatsoever
3:30
feel free to comment down below. I'll answer all of those as soon as I can. Otherwise
3:34
if you enjoy these videos, please like, subscribe or share. And I'll see you guys in the next
3:39
one where we're going to look at the universal selector. I'll see you guys then
