0:00:00.809,0:00:05.432 Let's move on from donuts to carrots, one of the healthiest foods in the world. 0:00:05.432,0:00:07.901 Plus the favorite food of rabbits. 0:00:07.901,0:00:10.534 Did you know that carrots aren't just orange? 0:00:10.534,0:00:13.535 They were actually originally purple. Some of them still are today. 0:00:13.535,0:00:19.541 We have this short webpage here with a list of carrot colors and a sentence about their purple origins. 0:00:19.541,0:00:25.267 And we've used classes to style the color names to the appropriate color. 0:00:25.267,0:00:31.905 I like how the styles look in the list, but I'm not sure I like how the "purple" style looks in the text. 0:00:31.905,0:00:36.215 I think I'd rather not use a background color, and go for more subtle coloring there. 0:00:36.215,0:00:43.778 How could I tell the browser to style the purple text here differently than the purple text here? 0:00:43.778,0:00:49.300 Well, they have the same class names, so we can't use class unless we introduce a new class name. 0:00:49.300,0:00:52.919 They also have the same tag name-- they're both s. 0:00:52.919,0:00:58.013 So we can't use the element-plus-class-name selector that we just learned. 0:00:58.013,0:01:00.663 Is there anything else different about them? 0:01:00.663,0:01:06.376 Well, one thing is that this is inside an , 0:01:06.376,0:01:10.985 whereas this is inside a . 0:01:10.985,0:01:15.583 So the difference is their parent tags-- the tags that are above them. 0:01:15.583,0:01:21.102 We can use this information to make a CSS rule, using what's called a "descendant selector"-- 0:01:21.102,0:01:25.216 a way of selecting elements based on their position in the document. 0:01:25.216,0:01:30.624 For example, to select only the purple inside the paragraph 0:01:30.624,0:01:35.776 we'll write "p", and then a space-- the space is really important-- 0:01:35.776,0:01:40.381 and then the class name-- dot purple-- 0:01:40.381,0:01:46.112 and now we'll add our properties that will give us the more subtle coloring-- 0:01:46.112,0:01:50.311 background-color, transparent, override what it was before. 0:01:50.311,0:01:58.802 Okay, nice. So we've affected this purple text without also affecting this purple text. 0:01:58.802,0:02:02.879 And now any time we use the purple class inside a paragraph like this, 0:02:02.879,0:02:05.324 it'll get those styles applied after. 0:02:05.324,0:02:09.588 We can use that space to dig deep into our document. 0:02:09.588,0:02:15.728 Let's say we want to apply a styling just to tags that are in s. 0:02:15.728,0:02:23.143 We start with the parent tag-- -- and then the space, and then . 0:02:23.143,0:02:28.066 And maybe we'll give them a different line height to space them out more. 0:02:28.066,0:02:34.073 Nice. We can even add a in front of the if we wanted, 0:02:34.073,0:02:38.525 to make sure it didn't apply to s inside an . 0:02:38.525,0:02:43.807 You see, to use descendant selectors, we need to think hard about the structure of our document 0:02:43.807,0:02:46.102 And what tags are inside other tags. 0:02:46.102,0:02:49.512 If you're indenting nicely, then that should be easy to do 0:02:49.512,0:02:52.508 because your indentation will reflect the hierarchy of tags. 0:02:52.508,0:02:56.955 See, we have this , and indented inside that we have an , 0:02:56.955,0:02:59.341 and inside that we have the . 0:02:59.341,0:03:02.926 If you're not indenting nicely, well, fix that up now 0:03:02.926,0:03:07.024 because it'll make it much easier for you to understand the structure of your page 0:03:07.024,0:03:10.609 and to come up with CSS selectors based on that structure. 0:03:10.609,0:03:13.598 You can use that space between any kinds of selectors. 0:03:13.598,0:03:19.021 Like finding a particular tag type under an element that has a certain id, 0:03:19.021,0:03:22.463 or finding a particular id under elements with a particular class name, 0:03:22.463,0:03:25.333 any combination that you need to use. 0:03:25.333,0:03:32.230 The thing to remember is that if the structure of your page changes, then your old CSS rules might not apply. 0:03:32.230,0:03:37.185 So think carefully when you use them, and how future-proof your CSS will be. 0:03:37.185,0:03:41.300 You could always use classes if you want to be less dependent on the structure of your page. 0:03:41.300,0:03:45.612 Let's look back at the rules I created and think through them. 0:03:45.612,0:03:51.383 This first rule styles all the purple class elements inside paragraphs a certain way. 0:03:51.383,0:03:57.589 If I add in new paragraphs with purple class elements in the future, would I want them to get that property? 0:03:57.589,0:04:02.371 Yes, because I think that those properties will always look the best in the paragraph. 0:04:02.371,0:04:04.401 Do I need a more specific rule? 0:04:04.401,0:04:11.186 Well, maybe if these paragraph were always inside some element with class name "article", I could add that to the rule. 0:04:11.186,0:04:14.249 But for now, this is the most specific I can be. 0:04:14.249,0:04:21.178 The second rule gives all the elements inside list items a certain line height. 0:04:21.178,0:04:26.039 Do I always want strong items inside s to have that increased line height? 0:04:26.039,0:04:30.978 Hm, maybe not. This rule might be too generic. 0:04:30.978,0:04:36.778 Since I'm not sure, I will add a class to this 0:04:36.778,0:04:42.032 and then change this one so it's "ul.spacey" 0:04:42.032,0:04:44.652 which makes it much more specific. 0:04:44.652,0:04:49.840 In the future, as my webpage grows, I might make the rule more or less specific. 0:04:49.840,0:04:53.619 Stick this tool in your ever-growing CSS toolbox 0:04:53.619,0:04:57.879 and practice it, so you can use it when it makes sense.