CSS In-Depth, v2

CSS In-Depth, v2 Relational Selectors & Combinators


This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.

Check out a free preview of the full CSS In-Depth, v2 course:
The "Relational Selectors & Combinators" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle reviews a demo of the selectors based on parent and descendant relationships. After introducing combinators. Estelle covers how to use the selectors API.

Get Unlimited Access Now

Transcript from the "Relational Selectors & Combinators" Lesson

>> Estelle Weyl: I wanna talk about relational selectors and combinators.
>> Estelle Weyl: So, as previously mentioned, there is the descendant selector. It's the combinator of a space. So here it says ul li, so it matches every list item that it is a descendant of an unordered list. So here, on the right-hand side, we have ordered list, and nested within that, we have an unordered list.

[00:00:34] If I say ol li it matches everything. And so I actually added some opacity and you'll see that A B and C were kind of matched twice. Because, the li, that is a descendant of the unordered list is also a descendant of the ordered list. But the ones that are just a descendant of the ordered list only match the first one.

[00:01:03] So basically it got the color twice.
>> Estelle Weyl: It got the color twice from just that. Because it is both a child and a grandchild. Here, if I click on ol greater-than sign li, that means, just the list items that are a child of the ordered list. So why is a, b, and c gray?

>> Estelle Weyl: Because it actually is nested within a gray parent, which is the parent li. So that parent li has been targeted as being gray, and so the whole thing has a background of being gray. It's not those individual items that then were also targeted. Then there's the adjacent siblings selector.

[00:01:59] So number 4 has a class of hasaclass, I should come up with better names. So this selector right here says find the li that comes immediately after, basically having the same parent. It's nested in the same parent. It comes immediately after an li that has a class. That's considered the adjacent sibling selector.

[00:02:23] So let me see if I can get rid of this. No, I can't.
>> Estelle Weyl: Okay. I have a small problem which is the last one is not visible and it has tilde. So instead of the plus right here it has a tilde. The tilde is the general sibling selector.

[00:02:49] So, the general sibling selector, which was new in IE7, so it's not new anymore, targets the element. So if it said li.hasaclass till the li, it, it means match any li that comes after, not immediately after, but just generally after an ally that has a class. So here, number 4 has a class, and 5, 6 and 7 are general siblings.

[00:03:18] They're not the adjacent sibling, which is the plus sign, they are the tilde, which is the general sibling.
>> Estelle Weyl: Just so you know how I actually did that JavaScript, I used the selectors API. And I basically, the reason I'm pointing this out is, in JavaScript you can see querySelector and querySelectorAll.

>> Estelle Weyl: And target, you can put any css select that we cover today can put in there and target that element. The first one comes back with just the first element. The second one which is querySelectorAll comes back with all of the element. And then you could do something..

[00:04:02] You see, this is a little bit more complex. It says, find me all the elements that had the class of foo, that are descendant of bar. And you can actually get much complex than this. You can put,
>> Estelle Weyl: Any descendent of bar that also has a type attribute.

[00:04:30] So you can put anything in there and you can use JavaScript to define those elements if you need to. And so I basically used the selectors API with the class list, which is a feature in JavaScript as well, to add and remove classes. And that's how I did the JavaScript that selected those.

[00:04:48] So I want you to think about the fact that you can add and remove classes and have query selector and querySelectorAll in your JS and add move classList and target elements.