Class, ID, & Descendant Selectors

[00:00:00]
>> If our body here on the page, our declaration here on the page says that our font is Arial, what would happen if I start by just saying ul? And I am going to put in a font-family for this, probably something like times. What do you predict is going to happen when I do that here on the page?

[00:00:21]
How many people say the font stays Arial? How many people say the font goes to ul or it goes to our times? Okay, everybody here on the page says it goes to times, so let's make sure that that is true, font-family: Times;. I'll even be lazy and just do times like that.

[00:00:44]
Okay, well, so it all went to times, why did that happen?
>> Specificity.
>> Is it specificity?
>> Am I misusing that?
>> Specificity might be part of it, times in the font-family property is inherited. We have our ul right here that starts our entire list, and we just said ul should be times.

[00:01:08]
So it's times, and it is then, therefore, inherited by all of its children. So we have times being inherited by the ordered list, see that, and the unordered lists inside of it. So it's not gonna select just the ul's and not the ol's, it's gonna select the ul at the top, and then due to inheritance, it's going to inherit the whole way through the entire list.

[00:01:33]
That's what's going on there, okay? Likewise, if we just said something like color, oops, color: red; also one of my favorites. Everything is going to turn red, except for the links. So that's why things tend not to work as expected. It could be something like this. So that is just the ul by itself.

[00:01:55]
Let's take a look at a class and how a class works. I'm pretty sure you guys know how this works. So if I just said .nested instead, then only my nested list is going to inherit that. And again, color: red is an inherited property. So because my li here has a class of nested, the ol inside of it and the ul inside of that and the ol inside of that, all of that will turn red.

[00:02:25]
And then the last one, and do I have an id in here? I do, I have a last id. So if I said my last item had the color red, then the li with that id would have that. Okay, so this is probably the stuff you're familiar with here, right?

[00:02:44]
How many times can an id appear on a page? One time, right? So we can't reuse id's, they tend not to really be used much in CSS styling for that reason, tend to be used more with JavaScript. You can use them with CSS though. Now, it is possible to also group together your selectors.

[00:03:02]
And so we could do that, we could say, for example, our last, .nested. So these are comma separated, these are groups together. So each one of these parameters is evaluated independently, okay? So we evaluate last and we apply a color. We evaluate nested, we apply the color. They are not necessarily all those things have to exist, so I could say, I don't know, george, last and george, okay?

[00:03:35]
Last is still gonna turn red, george isn't anywhere on this page. But it's a legit CSS selector, and CSS perfectly happy to ignore it. Just not there on the page, okay? So that is what a group of selectors look like. You can make all of those quite complicated.

[00:03:59]
All right, then we start to get a little bit crazier, and that is the descendant selectors. So what is a descendant selector? You wanna have a definition for a descendant selector?
>> Selecting something that's exclusively a child of another element.
>> Maybe, yeah. So let's talk about families.

[00:04:22]
[LAUGH] Families are always a challenge. So, here at the very top of our family, we have a ul, we have an immediate child. [COUGH] That's this first li right here, okay? We also have a second child. That's the second li here. And we can simplify this just by turning up the little triangles here in our HTML and looking at this, right?

[00:04:47]
So this ul has one, two, three, four, five, six, seven, eight children. Yeah, and they're all li's. So that is the first level, that's just directly a parent-child relationship, right? What is the relationship of these li's to each other? What would they be considered to be in a family tree?

[00:05:11]
>> Siblings?
>> They are siblings, right? We have first siblings, we have last siblings, we have all the siblings in between. So those are siblings, and we have siblings selectors that are targeting those, okay? We also have, just to remind you of this as well, right? So that second li has some children as well.

[00:05:37]
It's child is singular, has one child, it is an ol, okay? So what is the relationship between this ul and this ol? What is the relationship between that first ul and that ol there on line seven?
>> Grandchildren.
>> They're grandchildren, right, okay? So yes, that is absolutely true.

[00:06:01]
In human families, they would be grandchildren, here we just call them descendants, because after parents and children, we just lose track. They're all descendants, okay? So that ol, this ul, and all of its children, [LAUGH] and it's ol. And this a, if we go all the way down here in line 15 in this a, it is related to that first ul, they are descendants, Okay?

[00:06:27]
That is useful to know because then we start to write selectors based on that. So the selector that you write all the time, That would look something like this, let's say ul a, okay? So let's turn all of the links red, ul a. So, a is going to be descended from ul, and this starts to bring in, one of the other things is going to be on my gravestone.

[00:06:54]
Which is that when you're working with selectors, you want to read them from right to left, even though you're writing them from left to right, okay? So, yes, we write it as ul a, but the way we read this is for all a elements that are descended from ul elements.

[00:07:17]
In this case, we select all of the links here because we determined all of them are related back to that first ul. How could we make this more specific to nested unordered lists? Anyone have an idea how we could make that more specific just to the nested unordered lists?

[00:07:37]
You can think about this one here on line 10. No, don't use the class. How can we make it more specific? So one way we could do that is we could just line up more parameters here. We could say ul ul a, Right? So now, we have a pattern.

[00:07:56]
So we're looking at a pattern of a ul, that's the parent. We have a ul inside of that, and then we have a link inside of that. So that's how we got there. Now, the ordered list also matches that pattern, cuz we have a ul on line 4, we have a ul on line 10, and we have a link on line 15.

[00:08:18]
So that second link is also fits that pattern.
>> In chat, we have ul descendant selector a. So they put ul.nested and ul, li a.
>> Yeah,
>> My guess is.
>> There are many guesses and there's many ways to do this. With so many elements to choose from, we can write all kinds of levels of selectors, right?

[00:08:58]
I always write all kinds of levels of selectors. Okay, so that is the concept of a descendant selector. They have their space separated, and they line up here all in a row, just like this. Now, we also have the, specifically a parent-child relationship, right? We talked about just a parent-child.

[00:09:25]
So what if we were interested in, let's say the, looking at my list here. Let's say we wanna select, The second ol right here, okay? So not the first ol but the second ol. Let's say we wanna select that, how might we go about doing that? Anybody have any ideas?

[00:10:03]
Sometimes it helps just to sort of tidy up your HTML, you can always fold up what's not important.
>> Do we wanna target an ol, li, ol?
>> Yeah.
>> That's descendant of a list item as to send them down the list. Ul, li, ol, excuse me.
>> Okay, so, ul, li, ol, that's what you're saying?

[00:10:33]
>> Yeah.
>> Okay, and let's say, border: 1px solid blue. Okay, so that's not quite specific enough. What else could we do? There are many, many possibilities. So one thing we could try, we have a ul, we have an li, we have an ol. We have a ul, and we have an ol, right?

[00:11:12]
What if we did ul, ol, ul, ol? Yeah, that's totally it, that's what you meant, ul, ol, ul, ol, okay? So that's gonna put a border around the list. What if I want a border around the list items, what would I add?
>> Li.
>> Li. Now, it's around the list items.

[00:11:40]
See the difference, Okay? So you can string these things together. Now, obviously, this kind of pattern matching, a takes a lot of time, right, which is part of the reason that we love to you use classes. And B, what happens if that pattern appears somewhere else on your page and then you wind up getting some unexpected styling?

[00:12:03]
Yes, yes to all of that, that is absolutely true. If you were writing a custom webpage and you have complete control over the HTML and complete control over the CSS, this can feel a little bit sketchy to you. But I know there are many of you out there who are working in WordPress, and sometimes you don't have access to the HTML when you're winding up putting in styling like this.

[00:12:27]
You're working in Squarespace, you're working in Wix, you're working in Webflow, you're working in all kinds of different platforms where maybe you don't have access to the HTML. You've got to work with the HTML you have, not the HTML you wish you had. And so that's where sometimes these kinds of really weirdo selectors can come in super handy.

[00:12:47]
Because you're trying to target some things on this page that you are just not able to do otherwise. I agree, this gets a little bit ridiculous. But today, we are investigating what we can, not necessarily what we should. That is the set of selectors that you are probably most familiar with at this point in time.

[00:13:07]
We had just HTML elements, they're called type selectors. We had classes, we had id's, we had groups of selectors, and we had descendant selectors. Those are probably five that you were using most commonly. Very fast review of all those, and then we're gonna come back and we're gonna get into our parent-child or adjacent and general sibling selectors and attribute selectors.