1 00:00:00,660 --> 00:00:01,010 All right. 2 00:00:01,010 --> 00:00:07,660 So as promised we're going to talk about how you can pick and mix your CSS selectors. 3 00:00:07,680 --> 00:00:13,910 So one of my favorite childhood pastimes, picking and mixing sweets, until the dentist told me to stop, 4 00:00:13,950 --> 00:00:16,320 otherwise he's going to pull out all my teeth. 5 00:00:16,440 --> 00:00:22,560 So, dental horrors aside, let's talk about how you can combine different CSS selectors in order to apply 6 00:00:22,560 --> 00:00:24,980 styles more specifically. 7 00:00:25,290 --> 00:00:31,320 Now the first type is the easiest to understand and we've seen this when we combined all of our different 8 00:00:31,320 --> 00:00:37,710 heading types, h1 through to h6, and applied the font-family Montserrat-Bold to all of these HTML 9 00:00:38,160 --> 00:00:39,840 elements on our web page. 10 00:00:39,840 --> 00:00:46,030 So the idea here is that you write one selector, you add a comma and then a space, and then the next selector. 11 00:00:46,110 --> 00:00:51,270 So the space in this case is actually optional but it's quite nice to space it up just so that you can 12 00:00:51,270 --> 00:00:52,910 see it more clearly. 13 00:00:52,980 --> 00:00:58,200 But, later on, as we'll see in other cases, the spacing is really important, but when you're combining multiple 14 00:00:58,200 --> 00:00:59,690 selectors it's not a big deal. 15 00:00:59,700 --> 00:01:03,180 So selector1, selector2. 16 00:01:03,300 --> 00:01:05,870 That's a good style to follow. 17 00:01:05,970 --> 00:01:12,900 Now, the way that it works is, say that we have an h1 and a paragraph, and we want to apply the same color 18 00:01:13,500 --> 00:01:15,660 to the text in both cases. 19 00:01:15,750 --> 00:01:22,470 Then we can either write out you know this long winded approach of h1 color red, p color red, or we 20 00:01:22,470 --> 00:01:26,910 can simply combine it by writing h1, p. 21 00:01:27,090 --> 00:01:31,150 And in this case we're applying the color red to both of these elements. 22 00:01:31,320 --> 00:01:36,110 And this is just a way of shortening your code and grouping similar things together. 23 00:01:36,360 --> 00:01:42,150 You're going to see this most commonly at the HTML element level, and it's mostly for things like h1 through 24 00:01:42,150 --> 00:01:43,000 to h6. 25 00:01:43,050 --> 00:01:44,730 But this is very very simple. 26 00:01:44,790 --> 00:01:49,320 Now it gets a little bit more complicated when we start talking about hierarchical selectors, and that's 27 00:01:49,320 --> 00:01:53,480 because in order to use this properly we have to understand how the HTML is structured. 28 00:01:53,730 --> 00:02:01,740 So in our case we wrote this code that targeted the container-fluid class that is inside something that 29 00:02:01,740 --> 00:02:06,050 has the id of title, and we gave it a different padding. 30 00:02:06,180 --> 00:02:08,580 The syntax here looks like this. 31 00:02:08,580 --> 00:02:12,820 So you have selector1, then you have a space then you have selector2. 32 00:02:12,900 --> 00:02:15,410 And this is what I was talking about earlier on. Spacing 33 00:02:15,420 --> 00:02:17,670 in this case is crucial. 34 00:02:17,670 --> 00:02:22,740 You should have one space and the order is that the first selector is from the parent and the second selector 35 00:02:23,070 --> 00:02:24,580 is from the child. 36 00:02:24,750 --> 00:02:28,910 So let's take a look at this in more detail so that we can really get to grips with it. 37 00:02:29,100 --> 00:02:33,520 So in this case I've got a div that has a class of container-fluid, 38 00:02:33,700 --> 00:02:38,480 and I also have an h1 that has the id of title. 39 00:02:38,490 --> 00:02:44,770 So if we had some code that was written like this then this is a hierarchical combination of selectors. 40 00:02:44,790 --> 00:02:47,470 So you would read this from right to left. 41 00:02:47,490 --> 00:02:48,690 And so does the browser. 42 00:02:48,840 --> 00:02:54,750 So it's good to look for all of the h1s that are contained inside a div. 43 00:02:54,750 --> 00:03:00,480 So in this case it would work and it would change the text color to red because our h1 is indeed 44 00:03:00,480 --> 00:03:02,460 contained inside a div. 45 00:03:02,460 --> 00:03:05,460 But you might realize that this is very very broad. 46 00:03:05,520 --> 00:03:10,610 All of your h1s that are inside a div is going to be colored red. 47 00:03:10,710 --> 00:03:13,250 So you might want to make it a little bit more specific. 48 00:03:13,290 --> 00:03:21,570 Say in this case we're saying that the element that has an id of title that is contained inside a parent 49 00:03:21,660 --> 00:03:26,990 with the class container-fluid should have the text color of red. 50 00:03:27,000 --> 00:03:32,250 Now this is a lot more specific because firstly you're only going to have one id that is going to be 51 00:03:32,250 --> 00:03:34,590 title on your whole page. 52 00:03:34,590 --> 00:03:39,260 And by using the class of the parent you're also getting very very specific. 53 00:03:39,480 --> 00:03:44,850 Now in this case this is actually kind of redundant code because if you wanted to apply this style to 54 00:03:44,850 --> 00:03:51,420 an element with an id of title, as we said before, ids have to be unique across the page, so there can only 55 00:03:51,420 --> 00:03:54,660 be one thing with the id that is title. 56 00:03:54,660 --> 00:03:58,470 So you would never write this code, you would simply just target the id title, 57 00:03:58,470 --> 00:04:02,810 right? But this is probably the most legitimate code that you will see. 58 00:04:02,970 --> 00:04:09,630 So in this case we're saying that all the h1s on the web page that is the child of an element with 59 00:04:09,630 --> 00:04:18,060 the class container-fluid should be colored red. And this is a very specific way of applying styles to 60 00:04:18,120 --> 00:04:20,760 a particular element inside your web page. 61 00:04:20,820 --> 00:04:25,800 And this allows you to really drill down your CSS, because you're not applying your styles to all the 62 00:04:25,800 --> 00:04:33,750 h1, but instead you're saying that only the h1s that are inside a parent that has the class container- 63 00:04:33,750 --> 00:04:35,830 fluid should have this style. 64 00:04:35,850 --> 00:04:42,870 Now it's really important to remember that you should read the hierarchy from the right to the left. 65 00:04:42,900 --> 00:04:51,330 So in this case it's the element that has a class of title that is inside a parent that is a div that 66 00:04:51,330 --> 00:04:56,560 should have the color red. The one on the right is the child, the one on the left is the parent. 67 00:04:56,700 --> 00:05:04,730 And this syntax will only work in a parent child situation. You can't have, for example, a div that has 68 00:05:04,730 --> 00:05:07,850 the class of title and you're trying to use this syntax. 69 00:05:07,850 --> 00:05:09,440 It just simply won't work. 70 00:05:09,440 --> 00:05:13,950 Something has to be contained in something else. Something has to be a child of something else 71 00:05:14,000 --> 00:05:17,390 for this type of hierarchical syntax to work. 72 00:05:17,390 --> 00:05:24,530 Now the last type of combination I'm going to talk about are when you simply combine selectors, and in this 73 00:05:24,530 --> 00:05:26,830 case that space is gone. 74 00:05:26,840 --> 00:05:32,750 There is no space between your two selectors that you're combining and you can see something like this 75 00:05:32,750 --> 00:05:39,780 so an HTML element combined with a class, or it could be an HTML element combined with a id, 76 00:05:39,800 --> 00:05:41,280 it doesn't really matter. 77 00:05:41,510 --> 00:05:45,980 But they have to all occur in the same element. 78 00:05:45,980 --> 00:05:52,580 So in this case if I tried to change the color of the Hello World and I wanted to combine my selectors, 79 00:05:52,880 --> 00:05:59,390 I would say something like the h1 that has an id of title should have the color red, and this is how 80 00:05:59,390 --> 00:06:04,690 you should read the syntax. When there is no space you're reading from left to right. When there is space 81 00:06:04,700 --> 00:06:07,350 then it's hierarchical and you're reading from right to left. 82 00:06:07,610 --> 00:06:12,600 So it's a little bit confusing but you'll get used to it once you start applying it and using it yourself. 83 00:06:12,680 --> 00:06:18,350 So it doesn't matter if it's an id or if it's a class that's being combined with an HTML element, that 84 00:06:18,350 --> 00:06:19,970 doesn't matter at all. 85 00:06:20,030 --> 00:06:25,010 And as long as there's no space between your two selectors it will work just fine. 86 00:06:25,010 --> 00:06:30,800 So in this case we're saying that the div that has a class of container-fluid should have the text color 87 00:06:30,830 --> 00:06:33,480 of red being applied to all of its content. 88 00:06:33,560 --> 00:06:41,920 But this doesn't work if you're saying that the div with an id of title should have the text color red. 89 00:06:41,930 --> 00:06:49,610 This is not valid code because currently on screen we don't have a single div that has the id of title. 90 00:06:49,610 --> 00:06:54,490 We only have a div that has a child with the id of title and this doesn't work. 91 00:06:54,490 --> 00:06:58,370 We're going to have to use a hierarchical selector if you want to do something like this. 92 00:06:58,370 --> 00:07:04,820 So at this point a lot of students will ask, well what exactly is the difference between the one where 93 00:07:04,820 --> 00:07:09,350 you have a space between two selectors and the one where there is no space? 94 00:07:09,350 --> 00:07:15,990 So I've got this bit of HTML here that I've pre written to save you the boredom of having to watch me type. 95 00:07:16,010 --> 00:07:22,910 But essentially we've got a div that has a class of container and it contains an h1 that has the class 96 00:07:22,910 --> 00:07:25,030 of title and it says Hello World. 97 00:07:25,070 --> 00:07:29,950 Then we have another div that has the class of container-fluid and it has an h1 98 00:07:29,960 --> 00:07:32,220 with the class title as well. 99 00:07:32,220 --> 00:07:39,220 Now I've removed all traces of Bootstrap from this Code Ply because it's not important. 100 00:07:39,440 --> 00:07:41,500 I want to show you that what we're doing here, 101 00:07:41,690 --> 00:07:43,570 this is just pure CSS. 102 00:07:43,580 --> 00:07:47,780 It's not related to the Bootstrap classes or the framework at all. 103 00:07:47,780 --> 00:07:50,910 This is just CSS knowledge that we're learning here. 104 00:07:51,020 --> 00:07:59,540 So what if I wanted to apply some CSS styles in order to color the Hello World in red? What would I 105 00:07:59,540 --> 00:08:00,260 need to do? 106 00:08:00,380 --> 00:08:08,300 Well, unless I was willing to change the HTML, there is no way of applying a style selectively to this 107 00:08:08,330 --> 00:08:15,050 Hello World and not the Good Bye World without combining our, selectors because, for example, if I said, let's 108 00:08:15,050 --> 00:08:21,770 target the h1s and change the text color to red, then it's going to change both of the h1s. 109 00:08:21,790 --> 00:08:26,820 And this is the same if I try to use their class which is title as well, 110 00:08:26,900 --> 00:08:27,350 right? 111 00:08:27,350 --> 00:08:34,940 So I would need to combine my selectors and in this case the difference between these two titles is 112 00:08:34,940 --> 00:08:40,680 just that they're contained in different divs or divs with different classes rather. 113 00:08:40,790 --> 00:08:48,710 So I can use that fact to structure my CSS code. So I can say, for example, the text that has a class 114 00:08:48,710 --> 00:08:58,880 of title that's inside an element that has the class container should have this color red applied 115 00:08:58,970 --> 00:08:59,890 to it. 116 00:08:59,900 --> 00:09:03,310 So remember we're reading always from right to left. 117 00:09:03,320 --> 00:09:09,740 So we're saying that an element with a class called title that's inside an element with a class called 118 00:09:09,740 --> 00:09:13,340 container should have this style applied. 119 00:09:13,340 --> 00:09:20,090 So let's hit run and you can see that we've managed to isolate the Hello World from the Good Bye World 120 00:09:20,330 --> 00:09:23,880 simply by using hierarchical selectors. 121 00:09:23,880 --> 00:09:32,990 Now if I delete that space there, this code will no longer work, because what this now reads is, look for 122 00:09:32,990 --> 00:09:40,250 an element inside the HTML that has a class of container but also a class of title. 123 00:09:40,250 --> 00:09:45,920 So essentially what you're saying here is you're saying that it is an h1 that has two classes and 124 00:09:45,920 --> 00:09:47,080 it looks like this. 125 00:09:47,090 --> 00:09:53,090 So that is what this code is saying. When you're combining code together with no spaces, 126 00:09:53,120 --> 00:09:57,690 all of the selectors have to be within the same HTML element. 127 00:09:57,890 --> 00:10:05,400 So, you could say, an h1 that has a class of container and also a class of title should have this 128 00:10:05,400 --> 00:10:05,780 style. 129 00:10:05,790 --> 00:10:09,080 And when I run the code you can see this still works exactly the same. 130 00:10:09,180 --> 00:10:13,360 But this has no parent or child relationship at all. 131 00:10:13,410 --> 00:10:16,870 And you would be targeting two classes in the same element. 132 00:10:16,920 --> 00:10:22,500 But when you do combine selectors like this it doesn't really matter if you're combining classes with 133 00:10:22,500 --> 00:10:25,540 ids or ids with HTML elements. 134 00:10:25,560 --> 00:10:26,880 So let's give this an id. 135 00:10:26,880 --> 00:10:34,060 Let's call this heading, and let's change our class back to title and hit run. 136 00:10:34,080 --> 00:10:44,400 And now I'm able to change the h1 by saying h1#heading. This will target an h1 that 137 00:10:44,400 --> 00:10:48,670 has an id of heading and that is of course our Hello World. 138 00:10:48,690 --> 00:10:57,840 I can also say h1.title, but this now targets all the h1s that have a class of title, and that 139 00:10:57,870 --> 00:11:00,280 is both Hello and Good Bye. 140 00:11:00,390 --> 00:11:06,760 So I hope that illustrates a common confusion point which is space versus no space, 141 00:11:06,810 --> 00:11:11,720 and what is the difference between a hierarchical and a simple combo. 142 00:11:11,730 --> 00:11:14,800 So this takes a little bit of time to really sink in, 143 00:11:14,850 --> 00:11:22,500 and I really urge you to build your own code playground and mess with your code to try and target specific 144 00:11:22,500 --> 00:11:28,070 things without having to add in more custom classes into your HTML, 145 00:11:28,170 --> 00:11:33,180 so try to use combinations instead of adding new classes that you can target. 146 00:11:33,330 --> 00:11:38,130 So have a play around with that and in the next lesson we're going to get back to refactoring our code 147 00:11:38,370 --> 00:11:40,310 so that we can finish off our web site. 148 00:11:40,320 --> 00:11:43,310 So for all of that and more, I'll see you on the next lesson.