1
00:00:02,430 --> 00:00:09,660
So do you know why this left border stays green when we hover over the plan while the other two borders

2
00:00:09,990 --> 00:00:10,790
become red?

3
00:00:11,830 --> 00:00:14,590
It has to do with specificity.

4
00:00:14,590 --> 00:00:16,990
Let's inspect this free plan element,

5
00:00:17,020 --> 00:00:23,150
the whole section and let's add the hover effect in the developer tools.

6
00:00:23,230 --> 00:00:27,460
Now this is the styling which gets applied when we hover over this element.

7
00:00:27,760 --> 00:00:34,270
We can see the reason for the green border on the left here already, border left with that green color

8
00:00:34,930 --> 00:00:36,430
is the topmost rule,

9
00:00:36,610 --> 00:00:43,030
so it has a higher specificity than any rule below it, like our hover rule.

10
00:00:43,030 --> 00:00:48,610
So the general red border color is overwritten by this more specific rule

11
00:00:48,700 --> 00:00:55,290
and why does this rule have a higher specificity? Because we use an ID selector and as you learned, ID

12
00:00:55,300 --> 00:01:01,330
selectors have a higher specificity than class selectors or pseudo selectors,

13
00:01:01,330 --> 00:01:04,420
so that's the reason for the behavior we're seeing here.

14
00:01:04,690 --> 00:01:10,740
Now how can we fix this? A clean fix with some redundant code

15
00:01:10,750 --> 00:01:21,700
kind of is of course to go down to our free ID selector and also add the hover as well as active pseudo

16
00:01:21,700 --> 00:01:29,700
selectors there and set the border left color to that red color here too.

17
00:01:29,850 --> 00:01:37,560
If we do that and we reload the page, now we got the same look as before.

18
00:01:37,580 --> 00:01:44,450
Now this is as I said a clean way of fixing this, an alternative which you should absolutely use in

19
00:01:44,450 --> 00:01:54,950
very very rare occasions only is that you go up to your hover style and you add exclamation mark important

20
00:01:55,160 --> 00:01:56,390
after this style.

21
00:01:56,540 --> 00:02:01,760
Now what does important do? Important overrides specificity.

22
00:02:02,090 --> 00:02:09,620
Now this declaration always wins if you got it a second time with important, then the specificity is taken

23
00:02:09,620 --> 00:02:10,640
into account again

24
00:02:10,820 --> 00:02:14,200
but if you only had one time, this always wins.

25
00:02:14,300 --> 00:02:20,120
So if we save this and please keep in mind I commented out the cleaner solution and we reload the page,

26
00:02:20,770 --> 00:02:27,140
we still got the border here on the left because if we inspect the section and inspect the hover state,

27
00:02:27,740 --> 00:02:36,650
we see theoretically, free here has the highest specificity but border color actually is now applied because

28
00:02:36,650 --> 00:02:40,160
of important. Using important is a bad practice,

29
00:02:40,160 --> 00:02:46,790
I will say it just like that because if you use important all over your code, your code becomes unreadable

30
00:02:46,940 --> 00:02:51,750
and you're breaking the concept of specificity which exists for a good reason.

31
00:02:52,010 --> 00:02:59,960
So use it in very rare cases, maybe in cases like this one but better in cases where you use some third

32
00:02:59,960 --> 00:03:06,890
party library which might not be written in a good way and therefore overwrites some defaults, maybe sets

33
00:03:06,890 --> 00:03:10,250
a default button style which you don't want to have all the time,

34
00:03:10,430 --> 00:03:14,560
then you could overwrite such library defaults with important

35
00:03:14,690 --> 00:03:19,900
but in the end, be careful about this, don't use it too often.

36
00:03:19,970 --> 00:03:24,410
I will comment it out here and I will comment in the cleaner solution,

37
00:03:24,410 --> 00:03:31,460
I wanted to highlight that this is an alternative and in this case you could use it but I still discourage

38
00:03:31,580 --> 00:03:32,720
using it.

39
00:03:32,720 --> 00:03:35,050
So with that, let's reload one final time

40
00:03:35,330 --> 00:03:43,220
and we got the result we want, almost, I should not comment this out entirely, I should just comment out

41
00:03:44,480 --> 00:03:47,940
the important version of it, not the border color in general.

42
00:03:47,940 --> 00:03:51,950
So now let's reload and now we get the final style we want.

43
00:03:51,950 --> 00:03:55,830
So this is the packages page finished,

44
00:03:55,940 --> 00:03:59,750
it has all the styles I wanted to add to it.

45
00:03:59,810 --> 00:04:04,770
Now with that, let's revisit our page as we built it thus far,

46
00:04:04,820 --> 00:04:09,070
let's see if we can improve something and let's then conclude this module.