Up next in 10
CSS Tutorial For Beginners 15 - Descendant Selectors
69 views
Feb 7, 2024
In this CSS tutorial aimed at beginners, viewers are introduced to descendant selectors, a key concept for styling nested HTML elements in web development. The video likely covers how to use descendant selectors to target elements that are nested within other elements, enabling more precise and targeted styling. Viewers can expect to learn the syntax for descendant selectors and understand how they can be applied to create hierarchical styles that affect specific elements within a webpage's structure. The tutorial may include practical examples to illustrate the usage and benefits of descendant selectors in CSS styling. This tutorial serves as a foundational resource for beginners looking to gain a deeper understanding of CSS and improve their ability to style complex web layouts effectively.
View Video Transcript
0:00
Yo guys what the hell's up this is CSS for beginners lesson 15 and today we're
0:11
going to take a look at descendant selectors that's coming up okay so before we dive into the CSS I want to take a quick look at what descendants are
0:20
in relation to HTML so to do that I've got this nifty diagram once again here which
0:25
I'm really proud of for some reason and essentially this is just a very very
0:30
simple H-Timal structure. You've got your body tag at the top in blue then you've got a div tag
0:35
nested within that and a H1 tag and then you've got this H1 tag in pink nested within this
0:40
div tag. So what are descendants? Well essentially because all of these tags here, this pink
0:48
one included, are nested however many levels deep within this body tag, we would call those
0:54
descendants of the body tag. Okay? This H1 here is a descendant
0:59
of the div tag and the body tag. They're all descendants of the body tag
1:05
So you can kind of look at this a bit like a family tree, you know, where you've got the father, the mother
1:10
the children, the grandchildren, that kind of thing. So it's a pretty simple concept
1:15
and we're going to use this concept in creating some CSS selectors right now
1:21
Okay, guys, so I'm back here in the code, and I've not added much to it
1:25
just this div tag here, which is called subcontent, and that's nested within the main content
1:30
and then within that I put a P tag Okay so just going back to that idea of descendants again Basically we just going to take a look at this section today And we could say that all these tags here are descendants of this main content div
1:45
Because they're all nested, however many levels deep within this div. Okay
1:51
And this one here would be a descendant of this as well
1:55
It's a descendant of this, but it's also a descendant of this
1:59
because it's nested within it. So how does this help us in CSS
2:05
Well, say for example, we wanted to style some P-Tax, okay, but we didn't want to style them all
2:11
We just wanted to style these ones here, these three, because they're all nested within the main content
2:19
We want them to be styled within a specific way, not this one here. So how do we do that
2:24
Well, that's where we used descendant selectors. And to do a descendant selector, first of all, we write the parent element or the parent ID or the parent class
2:33
That's our first section of the selector. So in this case, it's main content
2:38
Simple, yeah? So let's put that first. So we're going after the ID of main content
2:45
And then what we do is pop a space. Okay? And then whatever we put after this will be what we target or the descendant of that element there
2:54
So we want the P tax. So we'll say P and then open our curly braces and then we can write our declaration
3:03
So this is saying to the CSS okay go and get the main content div That the parent because that first in the chain in the selector Okay that comes first we got a space to signify that we want a new element or class or ID within this containing element and we saying that we
3:21
want the peas so we're saying we want all peas within main content does that make
3:27
sense okay so we'll just give these a simple style of red and then we'll save
3:33
this and view it in a browser I'll put this up in Chrome
3:47
And there we go. So these are the P tags that are in that main content div
3:52
And this is the P tag that's not. So that's not been styled red because it's not a descendant of that main content
3:59
So let's take this one level further. We can have as many descendants in the chain as we want
4:04
Now, I mentioned before we had this P tag here. Now, this is a descendant of main content, so it is getting styled by this, but say we only
4:13
wanted to style this one and not these. Well, what we could do is we could just write subcontent P, and that would do the trick
4:24
as well, because this P here is a descendant of subcontent, so that would do the trick
4:29
Or we can take the descendant selectors as many levels deeper as we've
4:34
want we could do something like this and make it really specific okay main content that the overall pairing element then we saying we want the descendant element within that of subcontent So it going out and grabbing that because that a descendant of this
4:54
And then within that, we want the descendant of the P tag
4:59
Okay, does that make sense? So parent, child, grandchild, essentially. That's what's going on here
5:07
And we can take it as many levels deep as we want. you know, if we had other divs in here, other ideas or classes, we could take it further and further and further
5:15
It's not a great idea to get really specific because then you'll find it really hard to override these styles in the future
5:21
because remember when we talked about that point system, it's going to top up all these different points
5:26
and it's going to be hard to override. And you might find yourself using that important declaration when you don't really need to
5:31
So you don't need to make them too specific. The trick is make them only as specific as they need to be
5:38
So in this case, we didn't need to do this main content because this will do the trick
5:43
I was just illustrating a point that we can go as many levels deep as we like
5:48
So that about covers it for this lesson. It's a pretty simple topic
5:52
If you have any questions about descendant selectors whatsoever, you can comment below
5:56
and I'm going to answer all of those. Otherwise, I'm going to see you in the next movie. Don't forget to share, subscribe and like
6:02
If you enjoy these videos, please see you guys in the next one. Thank you