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