Now with the question about CSS selectors and when to use them, the answer is basically almost always
out of the way.
Let's have a look at the important annotation,
now what is that?
Here is a CSS example.
We got some rule and we added important at the end of it,
so before the semi-colon but after the value.
Now what does this do? It overwrites specificity and all other selectors,
that's super important.
It overwrites all these things and therefore, this specific declaration would always be applied.
Therefore you shouldn't really use important. In most cases, it's not a good idea to use it because
you're overwriting something that's baked into CSS, it quickly leads to bad code and you'll find yourself
using important all over the place, you're messing up your CSS code
therefore. There are some edge cases in which using it can be fine
and you'll actually see one later in the course
but in general, don't use important, this is really important.
Now let's have a look at a quick example though to see how it would work.
Back in our code, remember that highlighted class thing on the first section? It overwrites main section
simply because it comes later in the file,
so it's simply an order thing leading with a higher specificity of this rule.
Now let's say we want to enforce this border, we could do so by adding !important at
the end of this rule here,
of this declaration to be precise. Now it will only apply to this declaration, not to height, not to padding,
so if we overwrite any of these, let's say the height is set to 200 pixels, then that would not get overwritten
by important
but the border will, let's see. If I now reload the page,
the orange border is gone and the height also got changed.
Now the height got changed because I just set that height on highlighted
but you see the border is getting overwritten, even though in the developer tools, we can still see that
normally this would have a higher priority or specificity but actually, this border setting is taken because
of that important annotation.
If we remove that, maybe in the browser tools only for now, then you can see we're back to the orange
border because of course that would be the normal specificity.
That's also why it's bad to write this, your code becomes hard to understand
and if you then want to overwrite it
once again, you need to use important again because if you got important twice or more than twice, then
the normal specificity will kick in again and you're in a land of madness.
So don't use it unless in very rare edge cases which you'll notice if you meet them.
Most of the time, we're talking about some Javascript driven logic where you temporarily need to change
your style or if you're using some third-party styling package which is written in a bad way and uses
some styles that you need to overwrite and can't change otherwise.
But again, these are edge cases,
normally you shouldn't need to use important.