So do you know why this left border stays green when we hover over the plan while the other two borders
become red?
It has to do with specificity.
Let's inspect this free plan element,
the whole section and let's add the hover effect in the developer tools.
Now this is the styling which gets applied when we hover over this element.
We can see the reason for the green border on the left here already, border left with that green color
is the topmost rule,
so it has a higher specificity than any rule below it, like our hover rule.
So the general red border color is overwritten by this more specific rule
and why does this rule have a higher specificity? Because we use an ID selector and as you learned, ID
selectors have a higher specificity than class selectors or pseudo selectors,
so that's the reason for the behavior we're seeing here.
Now how can we fix this? A clean fix with some redundant code
kind of is of course to go down to our free ID selector and also add the hover as well as active pseudo
selectors there and set the border left color to that red color here too.
If we do that and we reload the page, now we got the same look as before.
Now this is as I said a clean way of fixing this, an alternative which you should absolutely use in
very very rare occasions only is that you go up to your hover style and you add exclamation mark important
after this style.
Now what does important do? Important overrides specificity.
Now this declaration always wins if you got it a second time with important, then the specificity is taken
into account again
but if you only had one time, this always wins.
So if we save this and please keep in mind I commented out the cleaner solution and we reload the page,
we still got the border here on the left because if we inspect the section and inspect the hover state,
we see theoretically, free here has the highest specificity but border color actually is now applied because
of important. Using important is a bad practice,
I will say it just like that because if you use important all over your code, your code becomes unreadable
and you're breaking the concept of specificity which exists for a good reason.
So use it in very rare cases, maybe in cases like this one but better in cases where you use some third
party library which might not be written in a good way and therefore overwrites some defaults, maybe sets
a default button style which you don't want to have all the time,
then you could overwrite such library defaults with important
but in the end, be careful about this, don't use it too often.
I will comment it out here and I will comment in the cleaner solution,
I wanted to highlight that this is an alternative and in this case you could use it but I still discourage
using it.
So with that, let's reload one final time
and we got the result we want, almost, I should not comment this out entirely, I should just comment out
the important version of it, not the border color in general.
So now let's reload and now we get the final style we want.
So this is the packages page finished,
it has all the styles I wanted to add to it.
Now with that, let's revisit our page as we built it thus far,
let's see if we can improve something and let's then conclude this module.