CSS Specificity is the set of rules that decide what styles are applied to elements, the more specific it is, the more weight it has in determining the style of an element.
You may ask yourself why do I need to understand CSS Specificity, may I just write !important when some styles are not applied. The answer is NO! By understanding how styles are applied, your code become more clean and easy to read. It is easier to change a particular style if you know exactly which selector to modify and you will no dig into naming architecture and ensuring that selectors won't conflict to each other.
There is a system with four categories which give to each selector weight, the most specific selector that bigger weight it has.
Inline Style overrides all other styles and has weight 1000.
IDs has weight 100
They all have weight of 10 for each donated element.
Elements have weight of 1.
There are also some exceptions to these rules and we will analyze them in this section.\n
The universal selectors (*, +, -, >, ~) have value of 0.
The !important value overrides absolutely everything and has value of 10000, but we should avoid using it , just in case.
The pseudo-class :not() has no specificity either.
Let's get these two selectors and see which one will be applied.
All css selectors have weight, the more specific it is, the more weight it has. Avoid using !important. Always look a way to use specificity before considering !important.
📩 If you like this post, subscribe and comment what other topics should I write about!