1 00:00:02,600 --> 00:00:08,570 Now with the question about CSS selectors and when to use them, the answer is basically almost always 2 00:00:08,960 --> 00:00:09,880 out of the way. 3 00:00:10,010 --> 00:00:13,250 Let's have a look at the important annotation, 4 00:00:13,570 --> 00:00:15,050 now what is that? 5 00:00:15,160 --> 00:00:17,110 Here is a CSS example. 6 00:00:17,240 --> 00:00:21,520 We got some rule and we added important at the end of it, 7 00:00:21,530 --> 00:00:23,870 so before the semi-colon but after the value. 8 00:00:23,900 --> 00:00:29,890 Now what does this do? It overwrites specificity and all other selectors, 9 00:00:29,930 --> 00:00:31,640 that's super important. 10 00:00:31,640 --> 00:00:38,950 It overwrites all these things and therefore, this specific declaration would always be applied. 11 00:00:39,050 --> 00:00:46,760 Therefore you shouldn't really use important. In most cases, it's not a good idea to use it because 12 00:00:46,790 --> 00:00:52,610 you're overwriting something that's baked into CSS, it quickly leads to bad code and you'll find yourself 13 00:00:52,610 --> 00:00:56,870 using important all over the place, you're messing up your CSS code 14 00:00:56,870 --> 00:01:01,260 therefore. There are some edge cases in which using it can be fine 15 00:01:01,400 --> 00:01:03,730 and you'll actually see one later in the course 16 00:01:03,890 --> 00:01:08,230 but in general, don't use important, this is really important. 17 00:01:08,390 --> 00:01:12,380 Now let's have a look at a quick example though to see how it would work. 18 00:01:12,500 --> 00:01:19,160 Back in our code, remember that highlighted class thing on the first section? It overwrites main section 19 00:01:19,220 --> 00:01:21,540 simply because it comes later in the file, 20 00:01:21,800 --> 00:01:25,720 so it's simply an order thing leading with a higher specificity of this rule. 21 00:01:25,720 --> 00:01:32,510 Now let's say we want to enforce this border, we could do so by adding !important at 22 00:01:32,510 --> 00:01:34,060 the end of this rule here, 23 00:01:34,070 --> 00:01:40,590 of this declaration to be precise. Now it will only apply to this declaration, not to height, not to padding, 24 00:01:40,730 --> 00:01:46,340 so if we overwrite any of these, let's say the height is set to 200 pixels, then that would not get overwritten 25 00:01:46,340 --> 00:01:47,060 by important 26 00:01:47,120 --> 00:01:51,220 but the border will, let's see. If I now reload the page, 27 00:01:51,410 --> 00:01:54,510 the orange border is gone and the height also got changed. 28 00:01:54,540 --> 00:01:58,360 Now the height got changed because I just set that height on highlighted 29 00:01:58,370 --> 00:02:04,180 but you see the border is getting overwritten, even though in the developer tools, we can still see that 30 00:02:04,190 --> 00:02:12,350 normally this would have a higher priority or specificity but actually, this border setting is taken because 31 00:02:12,350 --> 00:02:14,680 of that important annotation. 32 00:02:14,930 --> 00:02:22,650 If we remove that, maybe in the browser tools only for now, then you can see we're back to the orange 33 00:02:22,890 --> 00:02:27,090 border because of course that would be the normal specificity. 34 00:02:27,630 --> 00:02:31,910 That's also why it's bad to write this, your code becomes hard to understand 35 00:02:32,010 --> 00:02:33,960 and if you then want to overwrite it 36 00:02:33,990 --> 00:02:39,930 once again, you need to use important again because if you got important twice or more than twice, then 37 00:02:39,930 --> 00:02:45,130 the normal specificity will kick in again and you're in a land of madness. 38 00:02:45,150 --> 00:02:51,960 So don't use it unless in very rare edge cases which you'll notice if you meet them. 39 00:02:52,110 --> 00:02:57,510 Most of the time, we're talking about some Javascript driven logic where you temporarily need to change 40 00:02:57,510 --> 00:03:04,650 your style or if you're using some third-party styling package which is written in a bad way and uses 41 00:03:04,650 --> 00:03:08,860 some styles that you need to overwrite and can't change otherwise. 42 00:03:08,880 --> 00:03:10,980 But again, these are edge cases, 43 00:03:10,980 --> 00:03:13,170 normally you shouldn't need to use important.