WEBVTT 1 00:00:00.004 --> 00:00:01.008 - [Instructor] We talked about the cascade, 2 00:00:01.008 --> 00:00:04.008 which determines that the last style rule takes precedence 3 00:00:04.008 --> 00:00:06.004 when styles conflict. 4 00:00:06.004 --> 00:00:09.006 However, when different types of selectors are used, 5 00:00:09.006 --> 00:00:14.004 source order is overridden by a concept called specificity. 6 00:00:14.004 --> 00:00:17.002 Specificity refers to the rules which determine 7 00:00:17.002 --> 00:00:21.003 which CSS style takes precedence when styles conflict 8 00:00:21.003 --> 00:00:24.006 but it's based on the type and number of selectors used. 9 00:00:24.006 --> 00:00:27.001 With some having more weight than others, 10 00:00:27.001 --> 00:00:28.005 the higher the specificity, 11 00:00:28.005 --> 00:00:30.004 the more priorities a selector has 12 00:00:30.004 --> 00:00:33.002 when applying styles to an element. 13 00:00:33.002 --> 00:00:34.008 Here's how the selectors are weighted 14 00:00:34.008 --> 00:00:37.008 from highest to lowest specificity, 15 00:00:37.008 --> 00:00:42.002 ID, class, type, then universal. 16 00:00:42.002 --> 00:00:45.005 These values are calculated based on the selector type 17 00:00:45.005 --> 00:00:49.003 and the number of each type of selector used. 18 00:00:49.003 --> 00:00:52.004 Here's how the specificity calculations work. 19 00:00:52.004 --> 00:00:56.001 It's broken down into a three category count. 20 00:00:56.001 --> 00:00:58.002 The number of ID selectors, 21 00:00:58.002 --> 00:01:00.001 the number of class selectors, 22 00:01:00.001 --> 00:01:02.008 and the number of type selectors. 23 00:01:02.008 --> 00:01:06.002 The numbers for each count are then concatenated 24 00:01:06.002 --> 00:01:09.007 which means that they're joined together, not added. 25 00:01:09.007 --> 00:01:12.007 This will give us the final specificity value. 26 00:01:12.007 --> 00:01:16.007 In this example, this selector contains no IDs, 27 00:01:16.007 --> 00:01:19.006 one class, and one type selector 28 00:01:19.006 --> 00:01:24.006 for a concatenated value of zero, one, one. 29 00:01:24.006 --> 00:01:27.009 The higher the value, the higher the specificity. 30 00:01:27.009 --> 00:01:32.004 So in this example, id p has the highest specificity 31 00:01:32.004 --> 00:01:35.006 because there's one ID and one type selector 32 00:01:35.006 --> 00:01:39.003 resulting in a value of one, zero, one. 33 00:01:39.003 --> 00:01:44.001 Even though a selector like ul, li, a has three selectors, 34 00:01:44.001 --> 00:01:45.008 they're all type selectors. 35 00:01:45.008 --> 00:01:50.001 So the final concatenated value is only zero, zero, three. 36 00:01:50.001 --> 00:01:52.005 The universal selector isn't included in this count 37 00:01:52.005 --> 00:01:55.008 so their value is zero, zero, zero. 38 00:01:55.008 --> 00:01:58.002 Don't worry if these calculations seem overwhelming. 39 00:01:58.002 --> 00:02:00.003 It's good to have an understanding of how this works 40 00:02:00.003 --> 00:02:01.006 but you don't need to know 41 00:02:01.006 --> 00:02:04.006 the exact selector specificity value 42 00:02:04.006 --> 00:02:06.005 to write CSS effectively. 43 00:02:06.005 --> 00:02:08.009 It just takes some time to practice. 44 00:02:08.009 --> 00:02:11.005 Inheritance, cascade, and specificity 45 00:02:11.005 --> 00:02:14.007 all control health styles are applied to HTML 46 00:02:14.007 --> 00:02:17.002 and each concept applies these rules differently. 47 00:02:17.002 --> 00:02:19.004 So let's do a recap. 48 00:02:19.004 --> 00:02:22.002 When an inheritable property is added to an element, 49 00:02:22.002 --> 00:02:25.005 the descendant elements will inherit the style as well. 50 00:02:25.005 --> 00:02:29.005 Because of the cascade rule, the source order also matters. 51 00:02:29.005 --> 00:02:33.000 The declaration that is loaded last will take precedence. 52 00:02:33.000 --> 00:02:36.001 Unless you use a more specific selector. 53 00:02:36.001 --> 00:02:38.007 It will override both the inherited styles 54 00:02:38.007 --> 00:02:40.009 and the cascade rule. 55 00:02:40.009 --> 00:02:44.001 There is one exception to all these rules. 56 00:02:44.001 --> 00:02:46.001 The important flag. 57 00:02:46.001 --> 00:02:48.004 This keyword overrides all these rules 58 00:02:48.004 --> 00:02:51.002 to become the most specific rule, 59 00:02:51.002 --> 00:02:56.003 regardless of the cascade, inheritance, or specificity. 60 00:02:56.003 --> 00:02:58.006 The syntax starts with an exclamation mark 61 00:02:58.006 --> 00:03:00.007 in the keyword important. 62 00:03:00.007 --> 00:03:03.003 It's added to the end of the style declaration 63 00:03:03.003 --> 00:03:05.001 just before the semicolon. 64 00:03:05.001 --> 00:03:07.008 The only way to override an important style 65 00:03:07.008 --> 00:03:10.001 is to use a more specific selector 66 00:03:10.001 --> 00:03:11.009 with another important flag, 67 00:03:11.009 --> 00:03:13.008 so this can get pretty messy. 68 00:03:13.008 --> 00:03:17.004 In rare cases, it may be necessary to use important 69 00:03:17.004 --> 00:03:20.001 such as when working with a third party framework. 70 00:03:20.001 --> 00:03:22.008 That doesn't allow access to the CSS file. 71 00:03:22.008 --> 00:03:28.002 However, this should only be used as a last resort. 72 00:03:28.002 --> 00:03:31.001 Understanding how to use important can be helpful 73 00:03:31.001 --> 00:03:32.006 if you encounter it. 74 00:03:32.006 --> 00:03:34.008 But it's generally considered bad practice 75 00:03:34.008 --> 00:03:36.009 since it doesn't follow any rules. 76 00:03:36.009 --> 00:03:40.003 In most cases, following the rules of the cascade, 77 00:03:40.003 --> 00:03:42.006 specificity, and organization 78 00:03:42.006 --> 00:03:44.009 will prevent conflicts between styles.