1 00:00:00,390 --> 00:00:04,410 Combinators explain the relationship between elements in a selector. 2 00:00:04,410 --> 00:00:07,760 So every time we target two or more elements with one selector. 3 00:00:07,760 --> 00:00:11,420 We'll need to use a combinator, and would actually used combinators back in 4 00:00:11,420 --> 00:00:14,450 CSS basics when we wrote descendant selectors, 5 00:00:14,450 --> 00:00:18,280 because the white space between the two selectors is also considered a combinator. 6 00:00:19,310 --> 00:00:22,040 Besides being able to target descendant elements, 7 00:00:22,040 --> 00:00:26,560 combinators also give us the flexibility of targeting any siblings of an element. 8 00:00:26,560 --> 00:00:29,230 We can use the greater than sign, the plus sign, or 9 00:00:29,230 --> 00:00:32,370 a tilde symbol to make our selectors more specific. 10 00:00:32,370 --> 00:00:34,260 Let's take a look at these. 11 00:00:34,260 --> 00:00:36,260 First up, in a CSS selector, 12 00:00:36,260 --> 00:00:40,140 the greater than sign is referred to as a child combinator. 13 00:00:40,140 --> 00:00:44,470 And selectors that use child combinators are called child selectors, 14 00:00:44,470 --> 00:00:49,150 because they target elements that are direct children of other elements. 15 00:00:49,150 --> 00:00:53,450 Now, direct children are those elements that are directly nested 16 00:00:53,450 --> 00:00:55,260 inside a parent element. 17 00:00:55,260 --> 00:01:01,750 So, for example, when we take a look at our HTML file, we can see that the form, 18 00:01:01,750 --> 00:01:09,060 the hr and img elements are direct children of the container div here. 19 00:01:09,060 --> 00:01:13,700 But, the h1, the label element and 20 00:01:13,700 --> 00:01:18,420 the input fields are all direct children of the form element. 21 00:01:18,420 --> 00:01:22,030 They're not direct children of this container div. 22 00:01:22,030 --> 00:01:26,490 So, knowing this, let's go back to our style sheet, and the first thing I'm 23 00:01:26,490 --> 00:01:30,370 gonna do is copy one of these comments and scroll all the way down to the bottom, 24 00:01:31,440 --> 00:01:35,640 and then, I'm going to create a new comment that says Combinators. 25 00:01:38,280 --> 00:01:42,480 So first, let's create a direct child selector, 26 00:01:42,480 --> 00:01:46,970 that targets anchor elements that are direct children of a form. 27 00:01:46,970 --> 00:01:52,383 So first, we're going to target the form element, and then we're going 28 00:01:52,383 --> 00:01:57,552 to follow that with a greater than sign and then an a or anchor element. 29 00:01:57,552 --> 00:02:04,431 Then we're going to give this anchor elements a font size value of .7em. 30 00:02:04,431 --> 00:02:05,056 Right. So 31 00:02:05,056 --> 00:02:10,530 let's save our style sheet, and let's scroll down to our second form. 32 00:02:10,530 --> 00:02:16,110 Notice how when we refresh the browser the direct child selector we just wrote. 33 00:02:16,110 --> 00:02:22,030 Targets this link, because it is in fact a direct child of the form element. 34 00:02:22,030 --> 00:02:25,030 But you may ask, well, it's the only link in the form. 35 00:02:25,030 --> 00:02:27,960 Well, let's see what happens when we add this link as 36 00:02:27,960 --> 00:02:30,330 a descendant of another child element. 37 00:02:30,330 --> 00:02:32,510 So I'm gonna go ahead and copy. 38 00:02:32,510 --> 00:02:34,640 The last link here. 39 00:02:34,640 --> 00:02:37,040 And then I'll just paste it inside any of the labels. 40 00:02:37,040 --> 00:02:40,770 So for example I'm going to paste it inside the password label. 41 00:02:44,190 --> 00:02:45,730 All right? So, when we save our index file and 42 00:02:45,730 --> 00:02:47,500 take a look at it again. 43 00:02:47,500 --> 00:02:51,510 Notice how it doesn't target that particular link inside the password label, 44 00:02:51,510 --> 00:02:56,020 since this link is no longer a direct child of the form element, 45 00:02:56,020 --> 00:02:59,300 it's now a direct child of the label element. 46 00:02:59,300 --> 00:03:02,140 So as we can see, this is a very specific selector. 47 00:03:03,500 --> 00:03:06,120 So now I'll just go back and undo. 48 00:03:06,120 --> 00:03:10,060 The nested anchor element and the password label. 49 00:03:10,060 --> 00:03:10,580 And refresh. 50 00:03:11,720 --> 00:03:15,900 So another combinator we can use in a selector is a plus sign. 51 00:03:15,900 --> 00:03:20,110 The plus sign combinator is called an adjacent sibling combinator. 52 00:03:20,110 --> 00:03:24,120 And selectors that use them are called adjacent sibling selectors, 53 00:03:24,120 --> 00:03:27,560 because they target an elements next sibling on the page. 54 00:03:27,560 --> 00:03:30,380 So the one that immediately follows the element. 55 00:03:30,380 --> 00:03:36,210 For example, the two input element here in the first form are sibling elements so 56 00:03:36,210 --> 00:03:38,830 let's go ahead and take a look at these in the browser. 57 00:03:38,830 --> 00:03:41,480 So notice how currently, 58 00:03:41,480 --> 00:03:47,070 when the two buttons are in line they're a little too close together. 59 00:03:47,070 --> 00:03:50,230 Now what if we could somehow apply a left margin. 60 00:03:50,230 --> 00:03:52,500 To any button that's next to another button. 61 00:03:52,500 --> 00:03:56,850 So that way the first button remains flush with the contact, 62 00:03:56,850 --> 00:04:02,190 while the second button, gets a little bit of separation with the left margin. 63 00:04:02,190 --> 00:04:04,880 Well, with the adjacent sibling selector, 64 00:04:04,880 --> 00:04:10,810 we can specifically target button elements that immediately follow a button element. 65 00:04:10,810 --> 00:04:13,450 without having to add extra classes in our mark. 66 00:04:13,450 --> 00:04:18,940 So let's go back to our style sheet, and right above in the media query we wrote 67 00:04:18,940 --> 00:04:26,140 earlier, let's create a new selector that targets the class button. 68 00:04:26,140 --> 00:04:29,200 Then with the plus sign combinator. 69 00:04:29,200 --> 00:04:31,890 Will target its immediate sibling with the same class. 70 00:04:31,890 --> 00:04:36,710 So right after that we'll type .button. 71 00:04:36,710 --> 00:04:40,220 And in this new rule let's add a margin left property. 72 00:04:41,390 --> 00:04:44,460 And let's set the value to 20 pixels. 73 00:04:44,460 --> 00:04:47,960 So let's save our style sheet and bring up the browser. 74 00:04:47,960 --> 00:04:49,870 And when we refresh the page, 75 00:04:49,870 --> 00:04:54,170 notice how the second reset button gets a left margin. 76 00:04:54,170 --> 00:04:57,780 While the first button is still aligned with the content. 77 00:04:57,780 --> 00:04:59,000 It's left aligned. 78 00:04:59,000 --> 00:05:04,210 So now, any time we see two or more sibling elements with that class button, 79 00:05:04,210 --> 00:05:06,980 we'll see some separation between them with that left margin. 80 00:05:06,980 --> 00:05:09,880 So for example, let's go ahead and copy these two. 81 00:05:09,880 --> 00:05:12,480 And just paste them below. 82 00:05:12,480 --> 00:05:15,140 And if we save and take a look at it again,. 83 00:05:15,140 --> 00:05:19,930 We see the separation between each button while that first button remains aligned to 84 00:05:19,930 --> 00:05:22,350 the left with the content. 85 00:05:22,350 --> 00:05:26,220 So, now we'll be back and undo those two buttons and just keep the submit and 86 00:05:26,220 --> 00:05:27,500 reset ones moving forward. 87 00:05:29,800 --> 00:05:34,080 Finally, the third combinator we can use is the tilde symbol. 88 00:05:34,080 --> 00:05:38,360 Now, the tilde symbol is called a general sibling combinator. 89 00:05:38,360 --> 00:05:43,880 Because it targets siblings, but this time it not only targets an immediate sibling, 90 00:05:43,880 --> 00:05:47,720 it actually targets every specified sibling that follows. 91 00:05:47,720 --> 00:05:52,840 Now, this general sibling comminator isn't as commonly used as the child and 92 00:05:52,840 --> 00:05:55,140 sibling selectors we just wrote. 93 00:05:55,140 --> 00:05:57,230 But to quickly demonstrate how it works, 94 00:05:57,230 --> 00:05:59,730 let's create one of these general sibling selectors. 95 00:05:59,730 --> 00:06:02,370 So, we'll go back to our style sheet, and 96 00:06:02,370 --> 00:06:07,220 right beneath the child selector let's create a general sibling selector that 97 00:06:07,220 --> 00:06:11,520 targets every sibling label element that follows an h1. 98 00:06:11,520 --> 00:06:16,250 So, we'll do that by first selecting the h1 element. 99 00:06:16,250 --> 00:06:22,785 And then, we'll follow that with the tilde symbol and the label element type. 100 00:06:22,785 --> 00:06:26,530 So, again, with this selector, we're telling the browser to 101 00:06:26,530 --> 00:06:31,750 target all sibling label elements that follow an h1. 102 00:06:32,840 --> 00:06:34,980 So now, let's write a few CSS properties, so 103 00:06:34,980 --> 00:06:38,620 we can see which labels this selector will target. 104 00:06:38,620 --> 00:06:42,120 So first, let's add a background property, and 105 00:06:42,120 --> 00:06:46,550 let's set the color to tomato, my favorite color, hah. 106 00:06:46,550 --> 00:06:51,820 And then we'll set the color to white, and let's give it a little bit of padding. 107 00:06:51,820 --> 00:06:53,200 Let's say five pixels. 108 00:06:54,790 --> 00:06:57,340 All right, so let's save our style sheet. 109 00:06:58,550 --> 00:07:00,170 And refresh the page. 110 00:07:00,170 --> 00:07:06,250 And as we can see, because there's an h1 in the contact form here, 111 00:07:06,250 --> 00:07:11,690 now every sibling that follows the h1 takes on those styles we just wrote. 112 00:07:11,690 --> 00:07:16,010 And if we were to keep adding labels to this first form, they'd also turn red. 113 00:07:18,050 --> 00:07:22,420 And also notice that only the labels in the top contact form take on those styles, 114 00:07:22,420 --> 00:07:28,270 not the ones in the login form, since there isn't an H1 element in this form. 115 00:07:28,270 --> 00:07:29,700 Just up top in the contact form. 116 00:07:30,850 --> 00:07:34,200 So, as we've learned, combinators help us create styles for 117 00:07:34,200 --> 00:07:37,190 specific child elements, and sibling elements. 118 00:07:37,190 --> 00:07:42,750 But, keep in mind that we're only able to target siblings that follow an element, 119 00:07:42,750 --> 00:07:45,400 not ones that precede an element. 120 00:07:45,400 --> 00:07:46,970 You'll learn a couple more uses for 121 00:07:46,970 --> 00:07:49,790 these in the next code challenge, so be sure not to skip it. 122 00:07:50,940 --> 00:07:55,760 So let's quickly review some of what we've learned so far about CSS selectors. 123 00:07:55,760 --> 00:08:00,250 First, attribute selectors give us a lot of flexibility for selecting elements, 124 00:08:00,250 --> 00:08:04,200 because we're able to target an element by any of its HTML attributes. 125 00:08:04,200 --> 00:08:08,370 For example, a link's target attribute, or an input element's type attribute. 126 00:08:09,410 --> 00:08:12,540 remember the dry concept "Don't Repeat Yourself." 127 00:08:12,540 --> 00:08:16,760 So if we have CSS that is repeated several times throughout our style sheet, 128 00:08:16,760 --> 00:08:20,400 it is a good idea to refractor the CSS so that each property and 129 00:08:20,400 --> 00:08:22,360 value pair is defined once. 130 00:08:22,360 --> 00:08:24,230 This makes our stop sheets more maintainable. 131 00:08:25,250 --> 00:08:29,240 Besides using descendant selectors to target descendants of an element. 132 00:08:29,240 --> 00:08:33,730 We can define more specific child and sibling selectors, with combinators. 133 00:08:33,730 --> 00:08:35,442 Remember. [SOUND] The greater than sign 134 00:08:35,442 --> 00:08:37,425 targets a direct child of an element. 135 00:08:37,425 --> 00:08:40,364 [SOUND] The plus sign combinator targets immediate siblings. 136 00:08:40,364 --> 00:08:43,947 [SOUND] While the tilde symbol targets all the specified siblings that 137 00:08:43,947 --> 00:08:45,004 follow an element. 138 00:08:45,004 --> 00:08:49,628 When used carefully, combinators let us target more elements without having to 139 00:08:49,628 --> 00:08:52,010 write extra classes or IDs in our markup. 140 00:08:53,020 --> 00:08:57,200 Up next, we'll kick things up a notch when we learn about structural pseudoclasses, 141 00:08:57,200 --> 00:08:59,580 new powerful attribute selectors, and more. 142 00:08:59,580 --> 00:09:01,660 Now, if you thought these selectors were pretty neat, 143 00:09:01,660 --> 00:09:02,960 wait until you see what's next.