1 00:00:00,809 --> 00:00:05,432 Let's move on from donuts to carrots, one of the healthiest foods in the world. 2 00:00:05,432 --> 00:00:07,901 Plus the favorite food of rabbits. 3 00:00:07,901 --> 00:00:10,534 Did you know that carrots aren't just orange? 4 00:00:10,534 --> 00:00:13,535 They were actually originally purple. Some of them still are today. 5 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. 6 00:00:19,541 --> 00:00:25,267 And we've used classes to style the color names to the appropriate color. 7 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. 8 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. 9 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? 10 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. 11 00:00:49,300 --> 00:00:52,919 They also have the same tag name-- they're both s. 12 00:00:52,919 --> 00:00:58,013 So we can't use the element-plus-class-name selector that we just learned. 13 00:00:58,013 --> 00:01:00,663 Is there anything else different about them? 14 00:01:00,663 --> 00:01:06,376 Well, one thing is that this is inside an , 15 00:01:06,376 --> 00:01:10,985 whereas this is inside a . 16 00:01:10,985 --> 00:01:15,583 So the difference is their parent tags-- the tags that are above them. 17 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"-- 18 00:01:21,102 --> 00:01:25,216 a way of selecting elements based on their position in the document. 19 00:01:25,216 --> 00:01:30,624 For example, to select only the purple inside the paragraph 20 00:01:30,624 --> 00:01:35,776 we'll write "p", and then a space-- the space is really important-- 21 00:01:35,776 --> 00:01:40,381 and then the class name-- dot purple-- 22 00:01:40,381 --> 00:01:46,112 and now we'll add our properties that will give us the more subtle coloring-- 23 00:01:46,112 --> 00:01:50,311 background-color, transparent, override what it was before. 24 00:01:50,311 --> 00:01:58,802 Okay, nice. So we've affected this purple text without also affecting this purple text. 25 00:01:58,802 --> 00:02:02,879 And now any time we use the purple class inside a paragraph like this, 26 00:02:02,879 --> 00:02:05,324 it'll get those styles applied after. 27 00:02:05,324 --> 00:02:09,588 We can use that space to dig deep into our document. 28 00:02:09,588 --> 00:02:15,728 Let's say we want to apply a styling just to tags that are in s. 29 00:02:15,728 --> 00:02:23,143 We start with the parent tag-- -- and then the space, and then . 30 00:02:23,143 --> 00:02:28,066 And maybe we'll give them a different line height to space them out more. 31 00:02:28,066 --> 00:02:34,073 Nice. We can even add a in front of the if we wanted, 32 00:02:34,073 --> 00:02:38,525 to make sure it didn't apply to s inside an . 33 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 34 00:02:43,807 --> 00:02:46,102 And what tags are inside other tags. 35 00:02:46,102 --> 00:02:49,512 If you're indenting nicely, then that should be easy to do 36 00:02:49,512 --> 00:02:52,508 because your indentation will reflect the hierarchy of tags. 37 00:02:52,508 --> 00:02:56,955 See, we have this , and indented inside that we have an , 38 00:02:56,955 --> 00:02:59,341 and inside that we have the . 39 00:02:59,341 --> 00:03:02,926 If you're not indenting nicely, well, fix that up now 40 00:03:02,926 --> 00:03:07,024 because it'll make it much easier for you to understand the structure of your page 41 00:03:07,024 --> 00:03:10,609 and to come up with CSS selectors based on that structure. 42 00:03:10,609 --> 00:03:13,598 You can use that space between any kinds of selectors. 43 00:03:13,598 --> 00:03:19,021 Like finding a particular tag type under an element that has a certain id, 44 00:03:19,021 --> 00:03:22,463 or finding a particular id under elements with a particular class name, 45 00:03:22,463 --> 00:03:25,333 any combination that you need to use. 46 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. 47 00:03:32,230 --> 00:03:37,185 So think carefully when you use them, and how future-proof your CSS will be. 48 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. 49 00:03:41,300 --> 00:03:45,612 Let's look back at the rules I created and think through them. 50 00:03:45,612 --> 00:03:51,383 This first rule styles all the purple class elements inside paragraphs a certain way. 51 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? 52 00:03:57,589 --> 00:04:02,371 Yes, because I think that those properties will always look the best in the paragraph. 53 00:04:02,371 --> 00:04:04,401 Do I need a more specific rule? 54 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. 55 00:04:11,186 --> 00:04:14,249 But for now, this is the most specific I can be. 56 00:04:14,249 --> 00:04:21,178 The second rule gives all the elements inside list items a certain line height. 57 00:04:21,178 --> 00:04:26,039 Do I always want strong items inside s to have that increased line height? 58 00:04:26,039 --> 00:04:30,978 Hm, maybe not. This rule might be too generic. 59 00:04:30,978 --> 00:04:36,778 Since I'm not sure, I will add a class to this 60 00:04:36,778 --> 00:04:42,032 and then change this one so it's "ul.spacey" 61 00:04:42,032 --> 00:04:44,652 which makes it much more specific. 62 00:04:44,652 --> 00:04:49,840 In the future, as my webpage grows, I might make the rule more or less specific. 63 00:04:49,840 --> 00:04:53,619 Stick this tool in your ever-growing CSS toolbox 64 00:04:53,619 --> 00:04:57,879 and practice it, so you can use it when it makes sense.