Transcript from the "Descendant Selectors" Lesson
[00:00:00]
>> Jen Kramer: Now I have one more trick that I wanna show you here, and that has to do with a thing that happened here. When I made my font size bigger, see how I made my font size bigger on these links? I happen to have a link over here in this paragraph too, and see how that link font size got bigger too?
[00:00:19]
>> Jen Kramer: That's not what I wanted. I wanted my links to look that way, but I didn't really want that font size to go throughout my document. I only wanted it to happen over here for my links, that are here in my fine links. So, does anyone have any suggestions, how I can create the font size to be bigger just for the links that are here, in this document?
[00:00:41]
Just in the my fine links section, yeah?
>> Speaker 2: Get more specific on what you're targeting.
>> Jen Kramer: Yeah, I need to get more specific on what I'm targeting. That's absolutely true, okay? So, how could I go about doing that?
>> Speaker 3: Use a list and line?
>> Jen Kramer: I could try using li, that would be a good thing to do.
[00:00:59]
So I could say-
>> Speaker 3: You have another list except it's unordered list and ordered lists, I don't know.
>> Jen Kramer: Right, so I do have only one list one ordered list one an ordered list in this document, so I could say something with that UL, right? Nothing else there, yeah?
[00:01:19]
>> [INAUDIBLE]
>> Jen Kramer: So I could say something with the UL right? But we already decided that calling the UL to change the way my links look, that doesn't work, right? But we can put these two things together, in order to target our links a little bit more specifically, okay?
[00:01:36]
And the way I would go about doing that is, let's just start up here with my regular old unlinked stake here. If I said UL space A link, okay? So the space here is really, really important. So what I'm saying is, for all unvisited links located inside of an unordered list.
[00:02:03]
>> Jen Kramer: This is called the descendant selector, okay. So for all unordered links, or unvisited links inside of an unordered list, do the following. Yeah.
>> Speaker 2: I saw this term descendant selector.
>> Jen Kramer: Yeah.
>> Speaker 2: That's basically just something with n in another element.
>> Jen Kramer: Right. So we're talking about family here.
[00:02:31]
There are parents and children involved in our html here, does that makes sense? So, for example, for this A tag here what what would its parent be?
>> Speaker 3: The list?
>> Jen Kramer: Yet the list item, the Li, where would the parent of the list item be?
>> Speaker 3: Unordered list, the UL.
[00:02:50]
>> Jen Kramer: The unordered list the UL, what would the parent of the an ordered list be?
>> Speaker 3: H2?
>> Jen Kramer: No, not the H2.
>> Speaker 3: The body?
>> Jen Kramer: Probably the body tag right? Or we'd have to scroll all the way up here to the body tag to find something that encompassed that H2, right?
[00:03:08]
Okay, so, what would be the relationship between this H2 in this paragraph?
>> Speaker 3: Brothers?
>> Jen Kramer: Yeah, they're brothers, they're siblings. They're siblings, that's exactly right, they're siblings, okay? So the H2, the paragraph, the UL, these are all siblings, okay? That those relationships will come in really handy when we talk more about some of these relationships tomorrow.
[00:03:34]
But, they're handy to keep in mind, when we talk about the descendant selectors. So descendant meaning we have ancestors and we have descendants, right? And we could be talking about our parents or grandparents or great grandparents, right? We could be talking about our children, our grandchildren, our great grandchildren.
[00:03:50]
We're not being real specific here. We're just saying ancestors and descendant. So with the ancestor and descendant or sorry with the descendants selector here in our CSS, we're simply saying that for all of the a's that live inside of the UL. And these A's live inside of a UL, don't they?
[00:04:11]
>> Jen Kramer: They definitely do. Okay, so that will affect these links here. So let's see what happens on our web page when we save that and take a look.
>> Jen Kramer: All right? So my other link down here in my main text, it's back to its regular old size and whatever styling it had by default, okay?
[00:04:31]
And see my only big links that are left are these ones here.