Combinators

Quick reference

• 00:05 In this video I wanna talk about combinators.
• 00:07 And combinators, they're something you use to sort of define the relationship between
• 00:12 different selectors.
• 00:14 And we've seen these already, a little bit,
• 00:16 we haven't actually called them combinators yet.
• 00:18 Basically there are four combinators.
• 00:20 There is the descendant selector, there is the child selector,
• 00:23 there is the adjacent sibling selector, and the general sibling selector.
• 00:26 So let's go through this real quick and look at these.
• 00:29 The first two are grouped together and the last two are kinda grouped together.
• 00:32 So a descendant selector would be let's say ul li, all right?
• 00:38 So we've sort of seen this before, all right, up here.
• 00:43 So this is a descendent selector, and
• 00:45 what that means is this will do something to everything in this descendent.
• 00:50 This is a descendent, the li is a descendent of ul.
• 00:53 So really quickly if we add some css here.
• 00:58 That just created a simple background, ccc.
• 01:01 If we come back here and let's create an ordered list and go li 1.
• 01:08 Something li something else.
• 01:13 Save this,come back.
• 01:15 We see this.
• 01:16 This is great.
• 01:17 So now any li we do, even nesting, we can do another ul and put some nesting.
• 01:25 Nested li more nested.
• 01:31 If we save this comeback, the gray still applies to this 'cause anything
• 01:36 that's descended past this first ul, the CSS will work for.
• 01:40 So that's descendent.
• 01:41 The next one we wanna talk about is a child selector.
• 01:43 And that looks like this.
• 01:46 And the difference between these two is a child is directly related, right?
• 01:51 It is immediately following.
• 01:53 So if we look at our HTML here, this first set of li,
• 01:57 that's the child, right, that's the immediate one.
• 02:01 So let's come back here and change this ul to ol.
• 02:07 Now we still have lis, right?
• 02:09 And here's our li, but this li is no longer an immediate child of this
• 02:14 original ul, we've done something else to it.
• 02:17 So if we save this, come back here and hit Reload, oops,
• 02:22 you know what we have our, original ol css is interfering, so lets save this.
• 02:29 Hit Reload and now this is no longer gray.
• 02:32 So the next one to talk about is the adjacent sibling.
• 02:34 And the adjacent sibling selector it selects everything that directly follows,
• 02:38 right, and that looks a little something like this.
• 02:41 So let's use P.
• 02:43 And we wanna create an adjacent sibling to P of another P.
• 02:48 Well, let's go color, I don't know, purple.
• 02:53 So if we save this, come back here and
• 02:57 let's go to our first P, this is text.
• 03:03 P this is purple text.
• 03:09 Now see these are both Ps, right?
• 03:11 But this one is directly following this one.
• 03:14 It is adjacent to it.
• 03:16 So if we save this and hit reload, we see the first one is completely normal and
• 03:20 the second one is purple 'cause it is adjacent, it follows, right?
• 03:23 So the adjacent sibling has to directly follow.
• 03:26 So if we put a line break in there,
• 03:29 hit Reload this text is no longer purple 'cause it doesn't directly follow.
• 03:34 So the last one to talk about is the general sibling selector.
• 03:39 And that instead of a plus sign, it's this tilde sign.
• 03:43 So if we save this, it's the same thing as a sibling selector but
• 03:46 it doesn't have to directly follow, right?
• 03:48 So see now, it's purple again.
• 03:50 So if we come back to our HTML, we see this, we got this <br>.
• 03:55 If we save this, it'll still be purple 'cause it can directly follow but it doesn't have
• 04:00 to directly follow, as long as it's after, somewhere after, it will work.
• 04:05 So those are the four different combinators, descendant, child, adjacent,
• 04:08 and general.
• 04:09 And it can be a little confusing the first time around.
• 04:12 But you will see pretty soon why you might use some of these in different
• 04:15 circumstances.
• 04:16 And they become a little more sort of understandable after you have a little bit
• 04:20 of experience with them.
• 04:22 And that’s all from this video.

Lesson notes are only available for subscribers.