WEBVTT 0 00:00.660 --> 00:01.010 All right. 1 00:01.010 --> 00:07.660 So as promised we're going to talk about how you can pick and mix your CSS selectors. 2 00:07.680 --> 00:13.910 So one of my favorite childhood pastimes, picking and mixing sweets, until the dentist told me to stop, 3 00:13.950 --> 00:16.320 otherwise he's going to pull out all my teeth. 4 00:16.440 --> 00:22.560 So, dental horrors aside, let's talk about how you can combine different CSS selectors in order to apply 5 00:22.560 --> 00:24.980 styles more specifically. 6 00:25.290 --> 00:31.320 Now the first type is the easiest to understand and we've seen this when we combined all of our different 7 00:31.320 --> 00:37.710 heading types, h1 through to h6, and applied the font-family Montserrat-Bold to all of these HTML 8 00:38.160 --> 00:39.840 elements on our web page. 9 00:39.840 --> 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. 10 00:46.110 --> 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 11 00:51.270 --> 00:52.910 see it more clearly. 12 00:52.980 --> 00:58.200 But, later on, as we'll see in other cases, the spacing is really important, but when you're combining multiple 13 00:58.200 --> 00:59.690 selectors it's not a big deal. 14 00:59.700 --> 01:03.180 So selector1, selector2. 15 01:03.300 --> 01:05.870 That's a good style to follow. 16 01:05.970 --> 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 17 01:13.500 --> 01:15.660 to the text in both cases. 18 01:15.750 --> 01:22.470 Then we can either write out you know this long winded approach of h1 color red, p color red, or we 19 01:22.470 --> 01:26.910 can simply combine it by writing h1, p. 20 01:27.090 --> 01:31.150 And in this case we're applying the color red to both of these elements. 21 01:31.320 --> 01:36.110 And this is just a way of shortening your code and grouping similar things together. 22 01:36.360 --> 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 23 01:42.150 --> 01:43.000 to h6. 24 01:43.050 --> 01:44.730 But this is very very simple. 25 01:44.790 --> 01:49.320 Now it gets a little bit more complicated when we start talking about hierarchical selectors, and that's 26 01:49.320 --> 01:53.480 because in order to use this properly we have to understand how the HTML is structured. 27 01:53.730 --> 02:01.740 So in our case we wrote this code that targeted the container-fluid class that is inside something that 28 02:01.740 --> 02:06.050 has the id of title, and we gave it a different padding. 29 02:06.180 --> 02:08.580 The syntax here looks like this. 30 02:08.580 --> 02:12.820 So you have selector1, then you have a space then you have selector2. 31 02:12.900 --> 02:15.410 And this is what I was talking about earlier on. Spacing 32 02:15.420 --> 02:17.670 in this case is crucial. 33 02:17.670 --> 02:22.740 You should have one space and the order is that the first selector is from the parent and the second selector 34 02:23.070 --> 02:24.580 is from the child. 35 02:24.750 --> 02:28.910 So let's take a look at this in more detail so that we can really get to grips with it. 36 02:29.100 --> 02:33.520 So in this case I've got a div that has a class of container-fluid, 37 02:33.700 --> 02:38.480 and I also have an h1 that has the id of title. 38 02:38.490 --> 02:44.770 So if we had some code that was written like this then this is a hierarchical combination of selectors. 39 02:44.790 --> 02:47.470 So you would read this from right to left. 40 02:47.490 --> 02:48.690 And so does the browser. 41 02:48.840 --> 02:54.750 So it's good to look for all of the h1s that are contained inside a div. 42 02:54.750 --> 03:00.480 So in this case it would work and it would change the text color to red because our h1 is indeed 43 03:00.480 --> 03:02.460 contained inside a div. 44 03:02.460 --> 03:05.460 But you might realize that this is very very broad. 45 03:05.520 --> 03:10.610 All of your h1s that are inside a div is going to be colored red. 46 03:10.710 --> 03:13.250 So you might want to make it a little bit more specific. 47 03:13.290 --> 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 48 03:21.660 --> 03:26.990 with the class container-fluid should have the text color of red. 49 03:27.000 --> 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 50 03:32.250 --> 03:34.590 title on your whole page. 51 03:34.590 --> 03:39.260 And by using the class of the parent you're also getting very very specific. 52 03:39.480 --> 03:44.850 Now in this case this is actually kind of redundant code because if you wanted to apply this style to 53 03:44.850 --> 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 54 03:51.420 --> 03:54.660 be one thing with the id that is title. 55 03:54.660 --> 03:58.470 So you would never write this code, you would simply just target the id title, 56 03:58.470 --> 04:02.810 right? But this is probably the most legitimate code that you will see. 57 04:02.970 --> 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 58 04:09.630 --> 04:18.060 the class container-fluid should be colored red. And this is a very specific way of applying styles to 59 04:18.120 --> 04:20.760 a particular element inside your web page. 60 04:20.820 --> 04:25.800 And this allows you to really drill down your CSS, because you're not applying your styles to all the 61 04:25.800 --> 04:33.750 h1, but instead you're saying that only the h1s that are inside a parent that has the class container- 62 04:33.750 --> 04:35.830 fluid should have this style. 63 04:35.850 --> 04:42.870 Now it's really important to remember that you should read the hierarchy from the right to the left. 64 04:42.900 --> 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 65 04:51.330 --> 04:56.560 should have the color red. The one on the right is the child, the one on the left is the parent. 66 04:56.700 --> 05:04.730 And this syntax will only work in a parent child situation. You can't have, for example, a div that has 67 05:04.730 --> 05:07.850 the class of title and you're trying to use this syntax. 68 05:07.850 --> 05:09.440 It just simply won't work. 69 05:09.440 --> 05:13.950 Something has to be contained in something else. Something has to be a child of something else 70 05:14.000 --> 05:17.390 for this type of hierarchical syntax to work. 71 05:17.390 --> 05:24.530 Now the last type of combination I'm going to talk about are when you simply combine selectors, and in this 72 05:24.530 --> 05:26.830 case that space is gone. 73 05:26.840 --> 05:32.750 There is no space between your two selectors that you're combining and you can see something like this 74 05:32.750 --> 05:39.780 so an HTML element combined with a class, or it could be an HTML element combined with a id, 75 05:39.800 --> 05:41.280 it doesn't really matter. 76 05:41.510 --> 05:45.980 But they have to all occur in the same element. 77 05:45.980 --> 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, 78 05:52.880 --> 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 79 05:59.390 --> 06:04.690 you should read the syntax. When there is no space you're reading from left to right. When there is space 80 06:04.700 --> 06:07.350 then it's hierarchical and you're reading from right to left. 81 06:07.610 --> 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. 82 06:12.680 --> 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 83 06:18.350 --> 06:19.970 doesn't matter at all. 84 06:20.030 --> 06:25.010 And as long as there's no space between your two selectors it will work just fine. 85 06:25.010 --> 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 86 06:30.830 --> 06:33.480 of red being applied to all of its content. 87 06:33.560 --> 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. 88 06:41.930 --> 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. 89 06:49.610 --> 06:54.490 We only have a div that has a child with the id of title and this doesn't work. 90 06:54.490 --> 06:58.370 We're going to have to use a hierarchical selector if you want to do something like this. 91 06:58.370 --> 07:04.820 So at this point a lot of students will ask, well what exactly is the difference between the one where 92 07:04.820 --> 07:09.350 you have a space between two selectors and the one where there is no space? 93 07:09.350 --> 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. 94 07:16.010 --> 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 95 07:22.910 --> 07:25.030 of title and it says Hello World. 96 07:25.070 --> 07:29.950 Then we have another div that has the class of container-fluid and it has an h1 97 07:29.960 --> 07:32.220 with the class title as well. 98 07:32.220 --> 07:39.220 Now I've removed all traces of Bootstrap from this Code Ply because it's not important. 99 07:39.440 --> 07:41.500 I want to show you that what we're doing here, 100 07:41.690 --> 07:43.570 this is just pure CSS. 101 07:43.580 --> 07:47.780 It's not related to the Bootstrap classes or the framework at all. 102 07:47.780 --> 07:50.910 This is just CSS knowledge that we're learning here. 103 07:51.020 --> 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 104 07:59.540 --> 08:00.260 need to do? 105 08:00.380 --> 08:08.300 Well, unless I was willing to change the HTML, there is no way of applying a style selectively to this 106 08:08.330 --> 08:15.050 Hello World and not the Good Bye World without combining our, selectors because, for example, if I said, let's 107 08:15.050 --> 08:21.770 target the h1s and change the text color to red, then it's going to change both of the h1s. 108 08:21.790 --> 08:26.820 And this is the same if I try to use their class which is title as well, 109 08:26.900 --> 08:27.350 right? 110 08:27.350 --> 08:34.940 So I would need to combine my selectors and in this case the difference between these two titles is 111 08:34.940 --> 08:40.680 just that they're contained in different divs or divs with different classes rather. 112 08:40.790 --> 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 113 08:48.710 --> 08:58.880 of title that's inside an element that has the class container should have this color red applied 114 08:58.970 --> 08:59.890 to it. 115 08:59.900 --> 09:03.310 So remember we're reading always from right to left. 116 09:03.320 --> 09:09.740 So we're saying that an element with a class called title that's inside an element with a class called 117 09:09.740 --> 09:13.340 container should have this style applied. 118 09:13.340 --> 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 119 09:20.330 --> 09:23.880 simply by using hierarchical selectors. 120 09:23.880 --> 09:32.990 Now if I delete that space there, this code will no longer work, because what this now reads is, look for 121 09:32.990 --> 09:40.250 an element inside the HTML that has a class of container but also a class of title. 122 09:40.250 --> 09:45.920 So essentially what you're saying here is you're saying that it is an h1 that has two classes and 123 09:45.920 --> 09:47.080 it looks like this. 124 09:47.090 --> 09:53.090 So that is what this code is saying. When you're combining code together with no spaces, 125 09:53.120 --> 09:57.690 all of the selectors have to be within the same HTML element. 126 09:57.890 --> 10:05.400 So, you could say, an h1 that has a class of container and also a class of title should have this 127 10:05.400 --> 10:05.780 style. 128 10:05.790 --> 10:09.080 And when I run the code you can see this still works exactly the same. 129 10:09.180 --> 10:13.360 But this has no parent or child relationship at all. 130 10:13.410 --> 10:16.870 And you would be targeting two classes in the same element. 131 10:16.920 --> 10:22.500 But when you do combine selectors like this it doesn't really matter if you're combining classes with 132 10:22.500 --> 10:25.540 ids or ids with HTML elements. 133 10:25.560 --> 10:26.880 So let's give this an id. 134 10:26.880 --> 10:34.060 Let's call this heading, and let's change our class back to title and hit run. 135 10:34.080 --> 10:44.400 And now I'm able to change the h1 by saying h1#heading. This will target an h1 that 136 10:44.400 --> 10:48.670 has an id of heading and that is of course our Hello World. 137 10:48.690 --> 10:57.840 I can also say h1.title, but this now targets all the h1s that have a class of title, and that 138 10:57.870 --> 11:00.280 is both Hello and Good Bye. 139 11:00.390 --> 11:06.760 So I hope that illustrates a common confusion point which is space versus no space, 140 11:06.810 --> 11:11.720 and what is the difference between a hierarchical and a simple combo. 141 11:11.730 --> 11:14.800 So this takes a little bit of time to really sink in, 142 11:14.850 --> 11:22.500 and I really urge you to build your own code playground and mess with your code to try and target specific 143 11:22.500 --> 11:28.070 things without having to add in more custom classes into your HTML, 144 11:28.170 --> 11:33.180 so try to use combinations instead of adding new classes that you can target. 145 11:33.330 --> 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 146 11:38.370 --> 11:40.310 so that we can finish off our web site. 147 11:40.320 --> 11:43.310 So for all of that and more, I'll see you on the next lesson.