NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,380 Hi guys and welcome back. 2 00:00:01,409 --> 00:00:03,539 In this video, let's talk about specificity. 3 00:00:03,869 --> 00:00:06,210 Specificity is really important in CSS. 4 00:00:06,510 --> 00:00:10,410 It is a mechanism used by browsers to determine which property declarations 5 00:00:10,410 --> 00:00:11,940 are applied to a given element. 6 00:00:12,463 --> 00:00:16,773 The selectors of the property determined the specificity weight. 7 00:00:16,993 --> 00:00:20,983 What that means is that if you have multiple competing properties, 8 00:00:21,193 --> 00:00:25,243 then it's going to depend on how that property was selected onto an 9 00:00:25,243 --> 00:00:26,863 element that is going to get applied. 10 00:00:27,317 --> 00:00:31,187 The property with the highest specificity weight wins and is applied to the element. 11 00:00:31,377 --> 00:00:34,027 And If there's a tie, then the order matters, the latest 12 00:00:34,057 --> 00:00:36,127 defined property is going to win. 13 00:00:36,487 --> 00:00:38,767 Let me show you a few examples about really what this means. 14 00:00:39,017 --> 00:00:42,647 It's important to note that the weighting system works in a very specific way. 15 00:00:42,677 --> 00:00:47,283 Different types of selector contribute differently to the specificity and a 16 00:00:47,283 --> 00:00:51,753 selector with a higher weight beats any number of selectors with a lower weight. 17 00:00:52,073 --> 00:00:54,533 Let's go into some examples because that's really the easiest 18 00:00:54,533 --> 00:00:56,243 way to see how this works. 19 00:00:56,743 --> 00:01:02,503 Let's say that we've got some HTML and a CSS set of properties or a single property 20 00:01:02,503 --> 00:01:03,913 in this case that looks like this. 21 00:01:03,913 --> 00:01:09,843 Here, we've got the selector, which is div ul li, this is a descendant 22 00:01:09,893 --> 00:01:13,573 combinator and we're setting the property to be orangered for the color. 23 00:01:14,393 --> 00:01:19,733 In order to decide whether to set the color property or to get the color from 24 00:01:19,733 --> 00:01:25,063 somewhere else, CSS has to determine which selector is most specific. 25 00:01:25,363 --> 00:01:30,973 This one, div ul li, or potentially a different one that is competing with it. 26 00:01:31,223 --> 00:01:33,953 The specificity is calculated like this; 27 00:01:34,193 --> 00:01:38,423 We grab div ul li, that's three different type selectors. 28 00:01:38,783 --> 00:01:42,083 So this has a specificity weight of three. 29 00:01:42,583 --> 00:01:47,203 Now, if there was another competing selector with a color property 30 00:01:47,203 --> 00:01:51,463 somewhere else, we would look at its specificity and see if it beats this one. 31 00:01:51,513 --> 00:01:53,913 Let me show you an example of how that might happen. 32 00:01:54,233 --> 00:01:59,550 Here we've got a button selector and we've also got a type="submit". 33 00:01:59,613 --> 00:02:02,293 So we've not seen this sort of selector before, but essentially 34 00:02:02,293 --> 00:02:06,313 it allows us to select elements by the attributes that they have. 35 00:02:06,473 --> 00:02:09,323 Here we would be selecting button elements, that have a type 36 00:02:09,353 --> 00:02:11,423 attribute with a submit value. 37 00:02:11,673 --> 00:02:18,083 The specificity for this is actually one one or one class or attribute 38 00:02:18,083 --> 00:02:20,003 selector, and one type selector. 39 00:02:20,393 --> 00:02:25,153 The specificity for this is higher than the previous example, which had three type 40 00:02:25,153 --> 00:02:30,083 selectors because the class or attribute selector has a higher specificity weight. 41 00:02:30,583 --> 00:02:34,543 We can also select just elements, any element that has a type of submit 42 00:02:34,543 --> 00:02:37,833 attribute, and that would have a specificity weight of one zero. 43 00:02:38,373 --> 00:02:42,153 Let's say that we've got these two pieces of CSS somewhere in our code. 44 00:02:42,753 --> 00:02:46,233 This one would get applied to buttons with a type of submit because the 45 00:02:46,233 --> 00:02:48,233 specificity weight is one one. 46 00:02:48,843 --> 00:02:52,473 And this one would get applied to every other element that isn't a button 47 00:02:52,653 --> 00:02:54,303 because the specificity is one zero. 48 00:02:54,303 --> 00:02:56,133 So it loses out to this one. 49 00:02:56,533 --> 00:02:58,863 Obviously in this example, the borders are the same, so you 50 00:02:58,863 --> 00:03:01,923 wouldn't see any difference, but this one would apply to buttons. 51 00:03:01,953 --> 00:03:03,183 This one will apply to everything else. 52 00:03:03,483 --> 00:03:06,423 This one would not overwrite this one. 53 00:03:06,923 --> 00:03:11,423 Let's say we've got this HTML: a
and inside it we've got an unordered list and 54 00:03:11,423 --> 00:03:12,873 then we've got some list items inside it. 55 00:03:13,583 --> 00:03:18,443 Now, I'm going to show you an example of how competing declarations get calculated. 56 00:03:18,973 --> 00:03:19,753 This is the CSS. 57 00:03:19,753 --> 00:03:24,343 So we've got a declaration font-weight: 600 that targets any 58 00:03:24,343 --> 00:03:26,323 element with the list _item class. 59 00:03:26,713 --> 00:03:30,033 And then we've got another declaration font-weight: 400 that 60 00:03:30,033 --> 00:03:34,813 targets all
  • elements, inside
      element that is inside a div. 61 00:03:35,313 --> 00:03:40,393 So the list item class has a weight of one zero. 62 00:03:40,913 --> 00:03:44,093 And did they div ul li has a weight of zero three. 63 00:03:44,613 --> 00:03:48,247 So therefore the top one wins because it has a higher weight 64 00:03:48,247 --> 00:03:52,807 and these list items would be bold or have a font weight of 600. 65 00:03:53,307 --> 00:03:57,957 You can also target IDs using CSS and these have an even higher specificity. 66 00:03:58,107 --> 00:04:00,027 This is one zero zero in this case. 67 00:04:00,207 --> 00:04:04,677 So one ID would beat any number of class or attribute selectors 68 00:04:04,827 --> 00:04:06,057 and any number of type selectors. 69 00:04:06,543 --> 00:04:11,163 You can also target elements that have both an ID and a class and here you can 70 00:04:11,163 --> 00:04:13,953 see that has a weight of one, one, zero. 71 00:04:14,453 --> 00:04:18,653 Finally with the highest specificity we've got the inline styles. 72 00:04:19,073 --> 00:04:23,903 So here, the inline style has the highest specificity one, zero, zero, zero. 73 00:04:24,283 --> 00:04:28,223 So it would beat any CSS styles applied via ID selectors, class or 74 00:04:28,223 --> 00:04:30,103 attribute selectors, or type selectors. 75 00:04:30,103 --> 00:04:32,623 So basically when you put inline styles in there, that's 76 00:04:32,623 --> 00:04:33,673 going to beat everything else. 77 00:04:33,883 --> 00:04:36,913 Generally not something that we'd recommend you do because it becomes 78 00:04:36,913 --> 00:04:40,123 really difficult to code in CSS if you've got your inline styles anywhere 79 00:04:40,510 --> 00:04:42,250 since they override everything else. 80 00:04:43,000 --> 00:04:46,660 Later on, we're going to learn about BEM, which is a methodology, 81 00:04:46,660 --> 00:04:50,530 a naming convention for writing CSS that helps us overcome the 82 00:04:50,530 --> 00:04:52,960 challenges of specificity in some way. 83 00:04:53,120 --> 00:04:58,490 Specificity is not the only thing going on when CSS is deciding which style to apply. 84 00:04:58,700 --> 00:05:02,510 There's also the exclamation mark important keyword. 85 00:05:03,290 --> 00:05:08,210 You can set the !Important keyword on any property declaration. 86 00:05:08,480 --> 00:05:12,890 So here we've got a selector of div ul li, and inside that selector, 87 00:05:13,010 --> 00:05:14,450 we're setting the background color. 88 00:05:14,840 --> 00:05:18,230 And we've said that setting the background color to blue is important. 89 00:05:18,701 --> 00:05:24,635 That means when you collide it with a higher specificity selector, such 90 00:05:24,635 --> 00:05:29,915 as this one that has an ID selector, because the left hand is marked 91 00:05:29,915 --> 00:05:34,185 as important, it's going to beat the higher specificity selector. 92 00:05:34,215 --> 00:05:37,965 The exclamation mark important is going to beat any non-important selector. 93 00:05:38,245 --> 00:05:42,865 Now, if you happen to have competing important declarations such as this one 94 00:05:43,165 --> 00:05:47,635 and this one where they're both important, then we look at specificity as normal and 95 00:05:47,635 --> 00:05:50,005 the ID selector would win in this case. 96 00:05:50,505 --> 00:05:54,435 Using important can get really confusing, and what ends up happening 97 00:05:54,435 --> 00:05:58,095 is if you use important, you end up overriding a lot of the specificity 98 00:05:58,095 --> 00:06:01,845 mechanism and that can make it really difficult to write good CSS. 99 00:06:01,935 --> 00:06:04,575 So we recommend that you never use important. 100 00:06:04,815 --> 00:06:07,785 There's a couple of situations where maybe you might use it. 101 00:06:08,070 --> 00:06:13,050 But honestly it's best if you just don't use it at all and just rely on specificity 102 00:06:13,320 --> 00:06:15,060 to determine what styles get applied. 103 00:06:15,480 --> 00:06:19,650 It is when CSS developers don't really understand specificity that 104 00:06:19,650 --> 00:06:22,930 they resort to using important in order to apply the styles that they 105 00:06:22,950 --> 00:06:27,090 want to apply and that just results in more problems later down the line. 106 00:06:27,090 --> 00:06:30,420 So try to avoid important but you're going to see it around any way so that's 107 00:06:30,420 --> 00:06:31,680 why we wanted to tell you about it. 108 00:06:32,180 --> 00:06:36,020 Remember for any non-important declarations, which should be the vast 109 00:06:36,020 --> 00:06:41,600 majority if not all of them, we look at specificity as normal and important, 110 00:06:41,600 --> 00:06:43,790 only affects single declarations. 111 00:06:43,820 --> 00:06:49,220 So let's say that we've gone to these two sets of CSS being applied to an element. 112 00:06:49,597 --> 00:06:54,217 You've got the div ul li on the left and an ID selector on the right. 113 00:06:54,717 --> 00:06:59,277 The important declarations, the color on the right, for example is 114 00:06:59,277 --> 00:07:02,237 going to get applied because it's important, but also it has a higher 115 00:07:02,237 --> 00:07:04,097 specificity anyway with the ID selector. 116 00:07:04,597 --> 00:07:07,687 This one would be applied because it's important and the competing 117 00:07:07,687 --> 00:07:11,497 declaration is not important, but all the other declarations are just 118 00:07:11,497 --> 00:07:15,727 relying on specificity and here we've got the ID selector so these 119 00:07:15,727 --> 00:07:17,617 ones on the right would get applied. 120 00:07:18,117 --> 00:07:19,377 Hopefully that makes sense. 121 00:07:19,437 --> 00:07:24,987 Specificity is very important and is really good to know how it works. 122 00:07:25,247 --> 00:07:28,917 Remember try to avoid using the exclamation mark important keyword. 123 00:07:28,947 --> 00:07:33,187 It just brings problems, but do rely on specificity when it makes sense to. 124 00:07:33,697 --> 00:07:36,217 Thanks for joining me in this video and I'll see you in the next one.