Child, Adjacent, and General Sibling Combinators9:03 with Guil Hernandez
Combinators give us the flexibility of targeting any siblings of an element. We can use the greater-than sign (>), plus sign (+), or tilde symbol (~) to make our selectors more specific.
>combinator targets a direct child of an element
+combinator targets an element's immediate sibling
~combinator targets all the specified siblings that follow an element
Combinators explain the relationship between elements in a selector. 0:00 So every time we target two or more elements with one selector. 0:04 We'll need to use a combinator, and would actually used combinators back in 0:07 CSS basics when we wrote descendant selectors, 0:11 because the white space between the two selectors is also considered a combinator. 0:14 Besides being able to target descendant elements, 0:19 combinators also give us the flexibility of targeting any siblings of an element. 0:22 We can use the greater than sign, the plus sign, or 0:26 a tilde symbol to make our selectors more specific. 0:29 Let's take a look at these. 0:32 First up, in a CSS selector, 0:34 the greater than sign is referred to as a child combinator. 0:36 And selectors that use child combinators are called child selectors, 0:40 because they target elements that are direct children of other elements. 0:44 Now, direct children are those elements that are directly nested 0:49 inside a parent element. 0:53 So, for example, when we take a look at our HTML file, we can see that the form, 0:55 the HR and image elements are direct children of the container div here. 1:01 But, the H1, the label element and 1:09 the input fields are all direct children of the form element. 1:13 They're not direct children of this container div. 1:18 So, knowing this, let's go back to our style sheet, and the first thing I'm 1:22 gonna do is copy one of these comments and scroll all the way down to the bottom, 1:26 and then, I'm going to create a new comment that says Combinators. 1:31 So first, let's create a direct child selector, 1:38 that targets anchor elements that are direct children of a form. 1:42 So first, we're going to target the form element, and then we're going 1:46 to follow that with a greater than sign and then an a or anchor element. 1:52 Then we're going to give this anchor elements a font size value of 0.7m. 1:57 Right. So 2:04 let's save our style sheet, and let's scroll down to our second form. 2:05 Notice how when we refresh the browser the direct child selector we just wrote. 2:10 Targets this link, because it is in fact a direct child of the form element. 2:16 But you may ask, well, it's the only link in the form. 2:22 Well, let's see what happens when we add this link as 2:25 a descendant of another child element. 2:27 So I'm gonna go ahead and copy. 2:30 The last link here. 2:32 And then I'll just paste it inside any of the labels. 2:34 So for example I'm going to paste it inside the password label. 2:37 All right? So, when we save our index file and 2:44 take a look at it again. 2:45 Notice how it doesn't target that particular link inside the password label, 2:47 since this link is no longer a direct child of the form element, 2:51 it's now a direct child of the label element. 2:56 So as we can see, this is a very specific selector. 2:59 So now I'll just go back and undo. 3:03 The nested anchor element and the password label. 3:06 And refresh. 3:10 So another combinator we can use in a selector is a plus sign. 3:11 The plus sign combinator is called an adjacent sibling combinator. 3:15 And selectors that use them are called adjacent sibling selectors, 3:20 because they target an elements next sibling on the page. 3:24 So the one that immediately follows the element. 3:27 For example, the two input element here in the first form are sibling elements so 3:30 let's go ahead and take a look at these in the browser. 3:36 So notice how currently, 3:38 when the two buttons are in line they're a little too close together. 3:41 Now what if we could somehow apply a left margin. 3:47 To any button that's next to another button. 3:50 So that way the first button remains flush with the contact, 3:52 while the second button, gets a little bit of separation with the left margin. 3:56 Well, with the adjacent sibling selector, 4:02 we can specifically target button elements that immediately follow a button element. 4:04 without having to add extra classes in our mark. 4:10 So let's go back to our style sheet, and right above in the media query we wrote 4:13 earlier, let's create a new selector that targets the class button. 4:18 Then with the plus sign combinator. 4:26 Will target its immediate sibling with the same class. 4:29 So right after that we'll type .button. 4:31 And in this new rule let's add a margin left property. 4:36 And let's set the value to 20 pixels. 4:41 So let's save our style sheet and bring up the browser. 4:44 And when we refresh the page, 4:47 notice how the second reset button gets a left margin. 4:49 While the first button is still aligned with the content. 4:54 It's left aligned. 4:57 So now, any time we see two or more sibling elements with that class button, 4:59 we'll see some separation between them with that left margin. 5:04 So for example, let's go ahead and copy these two. 5:06 And just paste them below. 5:09 And if we save and take a look at it again,. 5:12 We see the separation between each button while that first button remains aligned to 5:15 the left with the content. 5:19 So, now we'll be back and undo those two buttons and just keep the submit and 5:22 reset ones moving forward. 5:26 Finally, the third combinator we can use is the tilde symbol. 5:29 Now, the tilde symbol is called a general sibling combinator. 5:34 Because it targets siblings, but this time it not only targets an immediate sibling, 5:38 it actually targets every specified sibling that follows. 5:43 Now, this general sibling comminator isn't as commonly used as the child and 5:47 sibling selectors we just wrote. 5:52 But to quickly demonstrate how it works, 5:55 let's create one of these general sibling selectors. 5:57 So, we'll go back to our style sheet, and 5:59 right beneath the child selector let's create a general sibling selector that 6:02 targets every sibling label element that follows an H1. 6:07 So, we'll do that by first selecting the H1 element. 6:11 And then, we'll follow that with the tilde symbol and the label element type. 6:16 So, again, with this selector, we're telling the browser to 6:22 target all sibling label elements that follow in h1. 6:26 So now, let's write a few CSS properties, so 6:32 we can see which labels this selector will target. 6:34 So first, let's add a background property, and 6:38 let's set the color to tomato, my favorite color, hah. 6:42 And then we'll set the color to white, and let's give it a little bit of padding. 6:46 Let's say five pixels. 6:51 All right, so let's save our style sheet. 6:54 And refresh the page. 6:58 And as we can see, because there's an h1 in the contact form here, 7:00 now every sibling that follows the h1 takes on those styles we just wrote. 7:06 And if we were to keep adding labels to this first form, they'd also turn red. 7:11 And also notice that only the labels in the top contact form take on those styles, 7:18 not the ones in the login form, since there isn't an H1 element in this form. 7:22 Just up top in the contact form. 7:28 So, as we've learned, combinators help us create styles for 7:30 specific child elements, and sibling elements. 7:34 But, keep in mind that we're only able to target siblings that follow an element, 7:37 not ones that precede an element. 7:42 You'll learn a couple more uses for 7:45 these in the next code challenge, so be sure not to skip it. 7:46 So let's quickly review some of what we've learned so far about CSS selectors. 7:50 First, attribute selectors give us a lot of flexibility for selecting elements, 7:55 because we're able to target an element by any of its HTML attributes. 8:00 For example, a link's target attribute, or an input element's type attribute. 8:04 remember the dry concept "Don't Repeat Yourself." 8:09 So if we have CSS that is repeated several times throughout our stop sheet, 8:12 it is a good idea to refractor the CSS so that each property and 8:16 value pair is defined once. 8:20 This makes our stop sheets more maintainable. 8:22 Besides using descendant selectors to target descendants of an element. 8:25 We can define more specific child and sibling selectors, with combinators. 8:29 Remember. [SOUND] The greater than sign 8:33 targets a direct child of an element. 8:35 [SOUND] The plus sign combinator targets immediate siblings. 8:37 [SOUND] While the tilde symbol targets all the specified siblings that 8:40 follow an element. 8:43 When used carefully, combinators let us target more elements without having to 8:45 write extra classes or IDs in our markup. 8:49 Up next, we'll kick things up a notch when we learn about structural pseudoclasses, 8:53 new powerful attribute selectors, and more. 8:57 Now, if you thought these selectors were pretty neat, 8:59 wait until you see what's next. 9:01
You need to sign up for Treehouse in order to download course files.Sign up